10.rem适配案例（技术方案2:flexible.js+rem）：苏宁网移动端首页

最新推荐文章于 2021-07-29 22:52:39 发布
最新推荐文章于 2021-07-29 22:52:39 发布
阅读量103 收藏
点赞数
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lazylYYY/article/details/119206279
版权
本文详细介绍了移动端Web页面的自适应布局设置步骤，包括引入CSS样式、设置视口、初始化body、应用flexible.js、安装pxtorem插件、调整默认字体大小以及设置超过750px屏幕的字体大小。通过这些方法，可以确保页面在不同设备上呈现良好的视觉效果和用户体验。
摘要由CSDN通过智能技术生成

此处：下载地址

或者用老师给的也可以

1.引入移动端的css样式，视口，body初始化，CSS3盒子模型。详情看此链接

2.引入flexible.js文件

约束范围（后面有介绍为什么要约束） 

 

 3.安装px to rem插件

4.修改默认字体大小 

 5.设定屏幕超过750px时字体大小为75px

 6.自适应：

flexible.js实现移动端rem适配方案
10-15
【flexible.js 实现移动端rem适配方案】 在移动设备上开发网页时，为了实现不同分辨率屏幕间的适配，开发者通常会使用响应式设计。其中，rem（root em）单位是一种常用的解决方案，它允许我们将元素的尺寸相对于根...
移动端苏宁案列
weixin_42378409的博客
04-15 333
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl...
使用REM适配全屏方案：flexible适配宽度+adaptive适配高度.zip
01-15
方案是为解决特定问题或达成特定目标而制定的一系列计划或步骤。它的作用是提供一种系统性的方法，以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用： 问题解决： 方案的核心目标是解决问题。通过系统...
flexible.rem:移动端弹性布局（rem）解决方案
06-27
移动端弹性布局（rem）解决方案 问题 设计稿宽度为640（iPhone 4为基准）、750（iPhone 6为基准），怎样合理布局？ 不同设备、不同宽度（甚至是横屏），如何处理容器比例？宽度可以用百分比，高度呢？ 同上，如何...
rem适配js文件flexible.js和echartPxToRem.js
02-22
本主题将详细讲解如何利用`flexible.js`和`echartPxToRem.js`这两个JavaScript文件来实现rem适配，以及它们在实际项目中的应用。 `flexible.js`是阿里巴巴的一个开源解决方案，主要用于移动端的响应式布局。它通过...
11.移动端技术选择（响应式布局）：①Bootstrap、字体图标②Bootstrap布局容器（class=“container“） ③栅格系统参数、列嵌套、列偏移、列排序④响应式工具⑤阿里百秀案例
lazylYYY的博客
07-29 2539
目录 1.响应式布局概念： 2..Bootstrap简介： 3.Bootstrap使用 ①：创建文件夹结构 ②创建html骨架结构 ③引入相关样式文件 ④使用 ​ 4.Bootstrap布局容器（代码要写在class="container"里面） 5.Bootstrap栅格系统的参数 ①.基本运用.col-lg-n在一行平均显示n个元素（等于12平均份，小于12行内有空白，大于12另起一行）：​ ②.宽屏(.col-lg-n) 中屏 (.col-md-...
5.移动端技术选择（单独做页面）二：flex布局*******flex:1有继承性用flex:unset；取消子级继承
lazylYYY的博客
07-26 1169
目录 一：flex布局： 二： 父元素常见属性 1.flex-direction:设置主轴的方向​ 2.justify-conten:设置主轴上的子元素排列方式​ 3.flex-wrap:设置子元素是否换行​ 4.align-content:设置侧轴上的子元素的排列方式（多行）​ 5.align-items:设置侧轴上的子元素排列方式（单行）​ 6.flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap​ 7.align-content（多行）和a.
2.一：背景缩放background-size:①图片的宽度 图片的高度；②某条边的长度等比缩放③50%④cover；⑤contain；。二：背景二倍图。三：二倍精灵图
lazylYYY的博客
07-26 608
目录 一：背景缩放background-size: 二：背景图片二倍图 一：背景缩放background-size: <style> div { width: 500px; height: 500px; border: 2px solid red; background: url(images/dog.jpg) no-repeat; ...
5.案例：京东移动端首页
lazylYYY的博客
07-26 235
6.背景颜色渐变background:-webkit-linear-gradient(left top,red,blue,n个颜色)
lazylYYY的博客
07-27 188
8.移动端技术选择（单独做页面）三：rem布局①px、em、rem②媒体查询：max-width：小于或等于指定宽度min-width:大于或等于指定宽度③引入资源④less基础⑤rem两种适配方案
lazylYYY的博客
07-28 154
一：px、em、rem的关系： ①em是相对于父元素字体大小 ②rem是相对于html元素字体大小来说的 二：媒体查询 （and后面一定要有空格） 1.max-width：小于或等于指定宽度 2.min-width: 大于或等于指定宽度 三.引入资源 四.less基础 1.less的使用 ①定义less变量（命名规范） ②less编译（插件：easy less） ③less嵌套 ④less运算 五.rem适配方案 1.设计...
9.rem适配案例（技术方案1:less+媒体查询+rem）：苏宁网移动端首页
lazylYYY的博客
07-29 146
1.引入移动端的css样式，视口，body初始化，CSS3盒子模型。详情看此链接 2.设置公共common.less文件 common.less的代码： // 设置常见的屏幕尺寸 修改里面的html文字大小 a { text-decoration: none; } // 一定要写到最上面 html { font-size: 50px; } // 我们此次定义的划分的份数 为 15 @no: 15; // 320 @media screen and (min-width: 320.
3-（需引入的css和样式）①移动端开发选择②移动端技术解决方案③CSS3盒子模型必须有宽度box-sizing:border-box；④特殊样式
lazylYYY的博客
07-26 120
一：移动端开发选择 二：移动端技术解决方案 三：CSS3盒子模型box-sizing:border-box;传统模型：box-sizing:content-box; <style> div:nth-child(1) { /* 传统盒子模型= width + border + padding */ width: 200px; height: 200p...
7.常见flex布局思路
lazylYYY的博客
07-27 93
4.移动端技术选择（单独做页面）一：流式布局（百分比布局）！！！！！
lazylYYY的博客
07-26 88
移动端技术选型：项目经理选择 一：流式布局（百分比布局） ①可做网页宽度自由伸缩 ②在布局中可将宽度按100%分成各个模块为20%或其他 <style> * { margin: 0; padding: 0; } section { width: 100%; /* 宽最高不超过980px，最小不低于320...
1-①移动端基础②视口—标准的视口标签③二倍图（像素比）④解决像素比的例子
lazylYYY的博客
07-26 77
一：移动端基础： 二：视口 标准的视口标签 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 "> 三：二倍图（像素比） 四： 解决像素比的例子 ...
智慧建造总体策划方案（76页）.pptx
11-02
智慧建造总体策划方案（76页）
基于 Python2.7 和 PyQT4 开发的 modbus 通信采集软件
最新发布
11-02
基于 Python2.7 和 PyQT4 开发的 modbus 通信采集软件，已在 windows、deepin linux 和树莓派上测试！
移动端适配教程：rem转换与amfe-flexible实践
总结来说，本文提供了一个完整的移动端适配解决方案，通过`rem`单位和相关插件的配合，使得网页在不同设备上能保持良好的布局和字体大小一致性。开发者需要在项目中按照文档所述安装、配置和引入这些工具，以确保在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值