移动WEB开发之rem适配布局

一、rem 基础

（一）rem 单位

1、rem（root em）是一个相对单位，类似于em，em是父元素字体大小

2、不同的是rem的基准是相对于html元素的字体大小

3、比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px

二、媒体查询

（一）什么是媒体查询

1、媒体查询（Media Query）是CSS3新语法

（1）使用 @media 查询，可以针对不同的媒体类型定义不同的样式

（2）@media 可以针对不同的屏幕尺寸设置不同的样式

（3）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

（4）目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询

（二）语法规范

@media mediatype and|not|only (media feature) {

　　css-Code;

}

（1）用 @media 开头，注意@符号

（2）mediatype 媒体类型

（3）关键字 and|not|only

（4）media feature 媒体特征，必须有小括号包含

1、mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

2、关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

（1）and：可以将多个媒体特性连接到一起，相当于“且”的意思

（2）not：排除某个媒体类型，相当于“非”的意思，可以省略

（3）only：指定某个特定的媒体类型，可以省略

3、媒体特征

（1）每种媒体类型都具有各自不同的特征，根据不同媒体类型的媒体特性设置不同的展示风格。

（2）之一它们要加小括号包含

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

（三）媒体查询+rem实现元素动态大小变化

1、rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

2、媒体查询可以根据不同设备宽度来修改样式

3、媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

（四）引入资源（理解）

1、当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）

2、原理，就是直接在link中判断设备的尺寸，然后引入不同的css文件

三、less基础

（一）维护 css 的弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

（1）CSS 需要书写大量看似没有逻辑的代码，CSS冗杂度是比较高的；

（2）不方便维护及拓展，不利于复用；

（3）CSS 没有很好的计算能力；

（4）非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

（二）Less 介绍

1、Less（Leaner Style Sheets 的缩写）是一门CSS拓展语言，也成为CSS预处理器。

2、作为CSS的一种形式的拓展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

3、它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

4、Less中文网址：http://lesscss.cn/

5、常见的CSS预处理器：Sass、Less、Stylus

6、一句话：Less是一门CSS预处理语言，它拓展了CSS的动态特性。

（三）Less 安装

1、安装nodejs,可选择版本（8.0），网址：http://nodejs.cn/download/

2、检查是否安装成功，使用cmd命令（win10是 window+r 打开运行输入cmd）——输入“node-v” 查看版本即可

3、基于nodejs在线安装Less，使用cmd命令“npm install -g less” 即可

4、检查是否安装成功，使用cmd命令“lessc-v” 查看版本即可

（四）Less 变量

1、变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

2、语法：@变量名:值;

3、变量命名规范

（1）必须有@为前缀

（2）不能包含特殊字符

（3）不能以数字开头

（4）大小写敏感

（五）Less 编译

1、本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

2、所以，我们需要把我们需要的less文件，编译生成为css文件，这样我们的html页面才能使用。

3、vscode Less插件

Easy LESS 插件用来把less文件编译为css文件，安装完毕插件，重新加载下vscode，只需要保存一下Less文件，会自动生成CSS文件。

（六）Less 嵌套

1、我们经常用到的选择器嵌套

#header .logo {
　　width: 300px;

}

2、Less嵌套写法

#header {

　　.logo {

　　　　width: 300px;

　　}

3、如果遇到（交集|伪类|伪元素选择器）

（1）内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；

（2）如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

①

a:hover {
　　color: red;

}

②Less嵌套写法

a {

　　&:hover {

　　　　color: red;

　　}

（七）Less 运算

1、任何数字、元素或者变量都可以参与运算，就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写的*/

@width: 10px + 5;

div {

　　border: @width solid red;

}

/*生成的css*/

div {

　　border: 15px solid red;

}

/*Less 甚至还可以这样*/

width: (@width + 5) * 2;

2、注意：

（1）乘号（*）和除号（/）的写法

（2）运算符中间左右有个空格隔开 1px + 5

（3）对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

（4）如果两个值之间只有一个值有单位，则运算结果就取该单位

四、rem 适配方案

（一）rem 适配方案

1、让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

（二）rem 实际开发适配方案

1、按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）

2、CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem 为单位的值；

（三）rem 适配方案技术使用（市场主流）

1、技术方案1：

（1）less

（2）媒体查询

（3）rem

2、技术方案2（推荐）

（1）flexible.js

（2）rem

（四）rem 实际开发适配方案1

rem + 媒体查询 + less 技术

1、设计稿常见尺寸宽度

设备	常见宽度
iPhone 4.5	640px
iPhone 678	750px
Android	常见320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的安卓设备为720px