布局 - rem适配布局

1. rem基础

rem单位

rem(root em)是一个相对单位，类似于em，em是父元素字体的大小。

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

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

---

2. 媒体查询

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

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 重置浏览器大小时，页面会根据浏览器的宽度和高度重新渲染页面

语法规范：

@media mediatype and|not|only (media feature) {
	css-Code;
}

说明：

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

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

• 关键字 and，not，only

  • 关键字将 媒体类型或多个媒体特性连接到一起作为媒体查询的软件。
  • and：可以将多个媒体特性连接到一起
  • not：排除某个媒体类型，可以省略
  • only：指定某个特定的媒体类型，可以省略

• media feature 媒体特性，必须有小括号

  • 每种媒体类型都具备不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

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

一般按照从小到大的顺序写。

---

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

• rem单位跟着html变化，有了rem页面元素可以设置不同大小尺寸
• 媒体查询可以根据不同设备宽度来修改样式
• 媒体查询+rem 可以实现不同设备宽度，实现页面元素大小的动态变化

---

3. Less基础

• Less是一门CSS扩展语言，也成为CSS预处理器，为CSS加入程序式语言的特性，扩展了CSS的动态特性
• 它在CSS语法基础上引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本
• Less中文网址：[http://lesscss.cn](http://lesscss.cn
• 常见CSS预处理器：Sass，Less，Stylus
• 安装网址：http://nodejs.cn/download/

1）Less变量

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

@变量名: 值;

命名规范：

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

2）Less编译

需要把less文件，编译生成css文件，这样html页面才能使用。

3）Less嵌套

.nav {
    .logo {
        color: green;
    }
}

4）交集、伪类、伪元素选择器

• 内层选择器的前面没有&符号，则他被解析为父选择器的后代
• 如果有&符号，他就被解析为父元素自身或父元素的伪类

a {
        color: red;
        &:hover {
            color: blue;
        }
    }

5）Less运算

任何数字、颜色或变量都可以参与运算。less提供了加减乘除算术运算。

/* 代码块里面写*/
@width: 10px + 5;
div {
	border: @width solid red;
}

/* 生成的css */
div {
	border: 15px solid red;
}

width: (@width + 5) * 2;

注意：

• 运算符左右侧必须用空格隔开
• 两个数参与运算，如果只有一个数有单位，则最后的结果以该单位为准
• 两个数参与运算，如果两个数都有单位且不相同，则最后的结果以第一个单位为准

---

4. rem适配方案

1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

技术方案1

• less
• 媒体查询
• rem

1. 设计稿常见尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 678	750px
Android	常见320px、360px、375px、384px、400px、414px、500px、720px；大部分安卓设备为720px

一般情况下以一套或两套效果图适应大部分屏幕，现在基本以750为准。

2. 动态设置html标签font-size大小

• 假设设计稿为750px
• 将屏幕划分为15等份（也可以是10或20）
• 每一份作为html字体大小，这里就是50px
• 在320px设备中，字体大小就是21.33px

3. 元素大小取值方法

• 最后的公式：页面元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的份数）
• 屏幕宽度 / 划分的份数 就是html font-size的大小
• 或：页面元素的rem值 = 页面元素值（px）/ html font-size字体大小

技术方案2（推荐）

• flexible.js
• rem