本文介绍了两种响应式布局的适配方案：rem + 媒体查询 + Less技术，以及flexible.js。通过rem单位结合媒体查询实现元素动态大小变化，Less技术简化CSS编写。另外，flexible.js提供了一种简洁高效的移动端适配方法，避免媒体查询，通过设置html字体大小实现等比缩放。
rem适配布局有两种方案，一种是rem + 媒体查询 + Less技术，一种是使用 flexible.js。
方案1: rem + 媒体查询 + Less技术
方案技术简介
rem 单位
rem( root em )是一个相对单位，类似 em，em 的基准是相对于父元素的字体大小，rem 的基准是相对于根元素( html )的字体大小。
rem 的优点是可以通过修改 html 的 font-size 来改变页面元素的大小，可以实现整体控制。
媒体查询
媒体查询( Media Query )是CSS3新语法，可以针对不同的屏幕尺寸、媒体类型设置不同的样式，重置浏览器大小的过程中，会根据浏览器的宽高重新渲染，目前很多苹果手机、安卓手机、平板等设备都用得到多媒体查询。
语法：
@media mediatype and|not|only (media feature){
CSS CODE;
}
-
常见的 mediatype：all(所有设备) ，print(打印机和打印预览)，screen(电脑屏幕/平板电脑/智能手机)
-
and 连接，not 排除，only 特指，not 和 only 都可省略
-
常见的 media feature：width / min-width / max-width，定义输出设备中页面(最大/最小)可见区域的宽度
-
媒体查询一般按照从大到小或者从小到大的顺序来，从小到大写会更简洁
-
max-width 和 min-width 都是包含等于的
案例：媒体查询+rem实现元素动态大小变化
设置 html 的 font-size，div 的 font-size / height 单位为 rem，实现的效果：不同的屏幕宽度，会有不同的字体大小 / 块高度
<style>
@media screen and (min-width:320px) {
html{
font-size: 50px;
}
}
@media screen and (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>
<div class="top">购物车</div>
</body>
媒体查询引入资源
当样式比较繁多的时候，可以针对不同的媒体使用不同的样式表( stylesheets )，原理就是直接在 link 中判断屏幕的尺寸，调用不同的 css 文件。
例如，屏幕尺寸 >=640px，div 一行显示两个，320px <=屏幕尺寸< 640px，div 一行显示一个，就这样引入样式表：
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (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 了：npm install -g less
检查 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 编译
下载 VS Code 插件：Esay LESS，插件安装后只要保存一下 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;
}
.header a {
color: red;
}
.header a:hover {
color: blue;
}
- Less 运算
任何数字、颜色、变量都可以参与运算，Less 提供了加减乘除算术运算，运算符的左右两侧必须敲一个空格隔开。
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准，如果两个数都有单位，最后结果以第一个单位为准。
Easy LESS 4.0 官网：使用/运算符在括号外不执行除法（但可以使用./运算符在括号外强制执行除法），所以当 Easy LESS 除法计算失效时，加上括号
例如：
@border: 5px + 5;
div {
width: (200px / 2);
height: (200px + 50px) * 2;
border: @border solid red;
background-color: #666 - #222;
}
编译成的css:
div {
width: 100px;
height: 500px;
border: 10px solid red;
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 - 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="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等份
@media screen and (min-width: 320px) {
html {font-size: (320px / @num);}
}
@media screen and (min-width: 360px) {
html {font-size: (360px / @num);}
}
@media screen and (min-width: 375px) {
html {font-size: (375px / @num);}
}
@media screen and (min-width: 384px) {
html {font-size: (384px / @num);}
}
@media screen and (min-width: 400px) {
html {font-size: (400px / @num);}
}
@media screen and (min-width: 414px) {
html {font-size: (414px / @num);}
}
@media screen and (min-width: 424px) {
html {font-size: (424px / @num);}
}
@media screen and (min-width: 480px) {
html {font-size: (480px / @num);}
}
@media screen and (min-width: 540px) {
html {font-size: (540px / @num);}
}
@media screen and (min-width: 720px) {
html {font-size: (720px / @num);}
}
@media screen and (min-width: 750px) {
html {font-size: (750px / @num);}
}
- 新建首页样式文件 index.less
将 common.less 导入 index.less：@import "common"
生成 index.css 引入到 index.html：<link rel="stylesheet" href="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文件
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/flexible.js"></script>
- 设置首页样式文件 index.css
- 使用能够让 px 与 rem 单位互转的 VSCode 插件：
cssrem
插件默认的基准 font-size 是 16px，在这个案例中我们应该改为 75px。修改方法为点击 VS Code 的文件 > 首选项 > 设置，搜索rootFontSize，即可修改。
扫一扫
2038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
