rem 适配布局

1. rem单位

rem (root em)是一个相对单位，类似于em

em 是基准于父元素的字体大小

rem 的基准是相对于html元素的字体大小

优点：可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制

---

2. 媒体查询

---

2.1 什么是媒体查询

可以针对不同的设备屏幕尺寸设置不同的样式，当重置浏览器大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面

语法：@media 媒体类型 关键字 (媒体特性) { CSS-Code; }

• 媒体类型

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

  • all：用于所有设备
  • print：用于打印机和打印预览
  • scree：用于电脑屏幕、平板、手机

• 关键字

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

  • and（且）：将多个媒体特性连接到一起
  • not（非）：排除某个媒体类型（可以省略）
  • only：指定某个特定的媒体类型（可以省略）

• 媒体特性

  根据不同媒体类型的媒体特性设置不同的展示风格

  • width：定义输出设备中页面可见宽度
  • min-width：定义输出设备中页面最小可见宽度
  • max-width：定义输出设备中页面最大可见宽度

注意：媒体查询按照从小到大或从大到小的顺序来写

---

2.2 引入资源

不同大小的页面宽度调用不同的 css 样式表

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

---

3. less 基础

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器

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

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

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

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

---

3.1 Less安装

① 安装nodejs，网址：http://nodejs.cn/download/

② 检查是否安装成功，使用cmd命令输入“node –v”查看版本即可

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

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

---

3.2 Less 使用之变量

变量是指没有固定的值，可以改变的，CSS中的一些颜色和数值等经常使用

语法：@变量名: 值;

变量名命名规范：

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

例：@color: pink;

---

3.3 Less 嵌套语法

1. 常规嵌套选择后代

// less写法
#header {
    .logo {
       width: 300px;
    }
}

// 生成的css
#header .logo {
  width: 300px;
}

2. 交集、伪类、伪元素选择器 ，需要加 & 进行连接

// less写法
a{
  &:hover{
      color:red;
  }
}

// 生成的css
a:hover{
    color:red;
}

---

3.4 Less 运算

变量、颜色、属性值是带有数字的值都可以参与运算（四则运算）

• 运算符的左右两边必须以一个空格隔开（例：1px + 2）
• 如果两个单位不同的值运算，运算结果取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位
• 可以使用括号提高运算优先级（例：(1px + 2) * 3）

注意：颜色值之间运算必须全为数字，必须都带单位（例：#666 - #333）

---

3.5 导入其他 less

语法：@import "less名";

例：@import "common";

注意：可无需 less 文件名后缀

---

4. rem适配方案

当设备尺寸发生改变的时候，可以让一些元素自适应的等比例适配当前设备

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

---

4.1 less+rem+媒体查询

公式：

1. html font-size 字体大小 = 屏幕宽度 / 划分的份数
2. 实际元素的rem值 = 设计稿元素大小（px） / html font-size 字体大小

例：

1. 假设设计稿是750px（通常）
2. 假设我们把整个屏幕划分为15等份（可以是20份也可以是10等份，划分标准不一）
3. html font-size 字体大小 = 750px / 15 = 50px
4. 那么在320px设备的时候字体大小 = 320px / 15 = 21.33px
5. 假如设计稿元素大小 100px * 100px 在 750 屏幕下，就是 100px / 50 转换为rem = 2rem
6. 假如设计稿元素大小 100px * 100px 在 320 屏幕下，就是 2rem * 21.33 = 42.66px
7. 在不同的屏幕下，页面元素盒子就可以实现等比例缩放的效果

---

4.2 flexible.js + rem

手机淘宝团队出的简洁高效移动端适配库（推荐）

原理：把当前设备划分为10等份，但是不同宽度设备下，元素比例还是一致

1. 确定当前设备的html 文字大小（例：设计稿 750px / 10 = 75px）
   • cssrem：px 转换 rem 插件（默认 html 字体大小是 16px，设置搜索 css root 修改）
2. 页面元素rem值 = 实际元素px 值 / 75

github地址：https://github.com/amfe/lib-flexible

---