响应式布局:rem适配布局方案-觅稀奇MeXiQi.COM

rem适配布局有两种方案，一种是rem媒体查询Less技术，一种是使用flexible.js。

方案1:rem媒体查询Less技术

方案技术简介

rem单位

rem(rootem)是一个相对单位，类似em，em的基准是相对于父元素的字体大小，rem的基准是相对于根元素(html)的字体大小。
rem的优点是可以通过修改html的font-size来改变页面元素的大小，可以实现整体控制。

媒体查询

媒体查询(MediaQuery)是CSS3新语法，可以针对不同的屏幕尺寸、媒体类型设置不同的样式，重置浏览器大小的过程中，会根据浏览器的宽高重新渲染，目前很多苹果手机、安卓手机、平板等设备都用得到多媒体查询。
语法：

@mediamediatypeand|not|only(mediafeature){CSSCODE;}

常见的mediatype：all(所有设备)，print(打印机和打印预览)，screen(电脑屏幕/平板电脑/智能手机)
and连接，not排除，only特指，not和only都可省略
常见的mediafeature：width/min-width/max-width，定义输出设备中页面(最大/最小)可见区域的宽度
媒体查询一般按照从大到小或者从小到大的顺序来，从小到大写会更简洁
max-width和min-width都是包含等于的

案例：媒体查询rem实现元素动态大小变化

设置html的font-size，div的font-size/height单位为rem，实现的效果：不同的屏幕宽度，会有不同的字体大小/块高度

<style>@mediascreenand(min-width:320px){html{font-size:50px;}}@mediascreenand(min-width:640px){html{font-size:100px;}}.top{height:1rem;font-size:.5rem;background-color:green;color:white;text-align:center;line-height:1rem;}</style><body><divclass="top">购物车</div></body>

媒体查询引入资源

当样式比较繁多的时候，可以针对不同的媒体使用不同的样式表(stylesheets)，原理就是直接在link中判断屏幕的尺寸，调用不同的css文件。
例如，屏幕尺寸>=640px，div一行显示两个，320px<=屏幕尺寸<640px，div一行显示一个，就这样引入样式表：

<linkrel="stylesheet"href="style320.css"media="screenand(min-width:320px)"><linkrel="stylesheet"href="style640.css"media="screenand(min-width:640px)">

Less技术

CSS的弊端：CSS是一门非程序式语言，没有变量、函数、作用域等概念，需要书写大量看似没有逻辑的代码，冗余度比较高，不方便维护及扩展，不利于复用，没有很好的计算能力，对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

于是，Less应运而生：

Less是一门CSS扩展语言，也称为CSS预处理器，是在现有的CSS语法上，为CSS加入程序式语言的特性。它在CSS语法基础上，引入了变量、混入、运算、函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名字一样，Less可以让我们用更少的代码做更多的事情。

安装Less
首先安装Node.js，下载地址：http://nodejs.cn/download/，安装程序会把Node.js加入环境变量，打开命令行输入node-v，显示node.js的版本，说明安装成功。
Node.js集成了npm，所以现在就可以使用npm来下载Less了：npminstall-gless
检查Less的版本：lessc-v
Less变量：@变量名:值;
变量名命名规范：1.必须有@为前缀2.不能包含特殊字符3.不能以数字开头4.区分大小写
例如：

//定义一个粉色的变量【一处更改，多处生效】@color:rgb(214,170,178);//定义一个14像素的变量@font14:14px;body{background-color:@color;}div{background-color:@color;font-size:@font14;}

Less编译
下载VSCode插件：EsayLESS，插件安装后只要保存一下Less文件，会自动生成css文件。
Less嵌套
子元素的样式直接写到父元素里面，如果有伪类、交集选择器、伪元素选择器，内层选择器前需要加&，如果不加，会被解析为父选择器的后代。
例如：

.header{width:200px;height:200px;background-color:pink;a{color:red;&:hover{color:blue;}}}

编译成的css:

.header{width:200px;height:200px;background-color:pink;}.headera{color:red;}.headera:hover{color:blue;}

Less运算
任何数字、颜色、变量都可以参与运算，Less提供了加减乘除算术运算，运算符的左右两侧必须敲一个空格隔开。
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准，如果两个数都有单位，最后结果以第一个单位为准。
EasyLESS4.0官网：使用/运算符在括号外不执行除法（但可以使用./运算符在括号外强制执行除法），所以当EasyLESS除法计算失效时，加上括号
例如：

@border:5px5;div{width:(200px/2);height:(200px50px)*2;border:@bordersolidred;background-color:#666-#222;}

编译成的css:

div{width:100px;height:500px;border:10pxsolidred;background-color:#444444;}

rem适配方案

原理
使用媒体查询，根据不同设备尺寸，按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。
设计稿常见尺寸宽度
一般情况下，我们以1套或2套效果图适应大部分屏幕，放弃极端屏或降级牺牲一些效果。现在的设计稿基本以750px为主，大部分4.7~5寸的安卓设备为720px。
动态设置html标签font-size大小
假设设计稿是750px，把屏幕划分为15等份（划分标准不一，10等份20等份也可），每一份作为html字体大小，这里为50px。那么在320px设备上，html的字体大小为320px/15=21.33px，由此实现页面元素在不同尺寸屏幕上等比缩放。
例如：750px屏幕下有一个100*100的页面元素，转换为2rem*2rem，在320px屏幕下2rem=21.33px*2=42.66px，实际宽高42.66*42.66。该页面元素在750屏幕下和320屏幕下宽高比例都是1:1，实现了等比缩放。
元素大小取值方法
页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
html的font-size就是屏幕宽度/划分的份数，即：页面元素的rem值=页面元素值(px)/html的font-size

具体实现：苏宁移动端首页案例

技术选型
采取单独制作移动页面方案，rem适配布局（Less，rem，媒体查询），750px设计尺寸的设计图
搭建文件夹结构
css/images/upload/index.html
设置视口标签以及引入初始化样式

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><linkrel="stylesheet"href="css/normalize.css">

设置公共common.less文件
设置最常见的屏幕尺寸，利用媒体查询设置html的font-size。我们关心的尺寸有320px/360px/375px/384px/400px/414px/424px/480px/540px/720px/750px，划分的份数定为15等份，默认html的font-size为50px。

//设置常见屏幕尺寸，修改html的文字大小html{font-size:50px;}//在PC端直接用50px打开，注意这句要写在最上面a{text-decoration:none;}@num:15;//定义划分的份数为15等份@mediascreenand(min-width:320px){html{font-size:(320px/@num);}}@mediascreenand(min-width:360px){html{font-size:(360px/@num);}}@mediascreenand(min-width:375px){html{font-size:(375px/@num);}}@mediascreenand(min-width:384px){html{font-size:(384px/@num);}}@mediascreenand(min-width:400px){html{font-size:(400px/@num);}}@mediascreenand(min-width:414px){html{font-size:(414px/@num);}}@mediascreenand(min-width:424px){html{font-size:(424px/@num);}}@mediascreenand(min-width:480px){html{font-size:(480px/@num);}}@mediascreenand(min-width:540px){html{font-size:(540px/@num);}}@mediascreenand(min-width:720px){html{font-size:(720px/@num);}}@mediascreenand(min-width:750px){html{font-size:(750px/@num);}}

新建首页样式文件index.less
将common.less导入index.less：@import"common"
生成index.css引入到index.html：<linkrel="stylesheet"href="https://blog.csdn.net/HanyStill/article/details/css/index.css">

@import把一个样式文件导入到另一个样式文件，link是把样式文件引入到html页面内

body样式设置/头部搜索框/banner/广告/nav

方案2：flexible.js

简介

手机淘宝团队出的简洁高效移动端适配库，无需写不同屏幕的媒体查询，把当前设备划分为10等份，
我们只需确定当前设备的html的文字大小。
比如当前设计稿是750px，那么将html的文字大小设置为75px，里面页面元素rem值=页面元素px值/75

具体实现

技术选型
采取单独制作移动页面方案，rem适配布局(flexible.js，rem)，750px设计尺寸的设计图
搭建文件夹结构
css/images/js/upload/index.html
设置视口标签以及引入初始化样式还有js文件

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><linkrel="stylesheet"href="./css/normalize.css"><linkrel="stylesheet"href="./css/index.css"><scriptsrc="./js/flexible.js"></script>

设置首页样式文件index.css

使用能够让px与rem单位互转的VSCode插件：cssrem

插件默认的基准font-size是16px，在这个案例中我们应该改为75px。修改方法为点击VSCode的文件>首选项>设置，搜索rootFontSize，即可修改。

code

完整代码在https://gitee.com/luo_yang/rem-adapt