一、基础知识
1、em 单位
em 是一个相对单位，它的大小取决于元素本身字体的大小。如果元素字体大小发生变化，则 em 的大小也会相应变化。
2、rem 单位
rem 也是一个相对单位，与 em 类似，只不过它的大小取决于 html 元素字体的大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
如果html元素的字体大小发生变化，则 rem 的大小也会相应变化。
rem的优势：不同元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
二、媒体查询
1、概念
媒体查询是 CSS3 的新语法，可以针对不同的媒体类型和不同的屏幕尺寸设置不同的样式。当我们修改浏览器窗口大小的过程中，页面也会根据窗口的尺寸重新渲染页面。
2、语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
① mediatype 查询类型
该属性设置我们要查询的媒体类型， 将不同的终端设备划分成不同的类型，称为媒体类型。
② and| not | only 关键字
关键字用来将媒体类型或多个媒体特性连接起来作为媒体查询的条件。
- and：可以将多个媒体特性连接到一起，相当于“且”的意思。
- not：排除某个媒体类型，相当于“非”的意思，可以省略。
- only：指定某个特定的媒体类型，可以省略。
③ media feature 媒体特性
我们常用的媒体特性有三种：
④ 书写规则
媒体查询我们一般都是从小到大来书写，这样可以省略一部分不必要的代码，使代码更简洁。
案例：
⑤ 案例代码
/*1. 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式*/
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
/* 2.媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
三、less
1、简介
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器。他在现有的css语法基础上为css加入了程序式语言的特性。例如：变量、运算、函数等，大简化了 CSS 的编写，并且降低了 CSS的维护成本，让我们能用更少的代码做更多的事。每次项目运行时，都需要将less 文件 便以为css文件，然后才能发挥作用。
2、less变量
我们通常将一些常用的颜色和数值定义为变量，可以达到修改变量，其余调用的地方全部修改。
语法： @变量名:值;
@color: pink;
语法规范：
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
3、less嵌套
与css不同的是，less的语法定义可以将子元素的css 嵌套到 父元素的css中。使结构更加清晰，代码更整洁，但是我个人还是比较喜欢css样式的格，因为这样后期改的时候比较方便。
// css格式
#header .logo {
width: 300px;
}
// less格式
#header {
.logo {
width: 300px;
}
}
4、交集|伪类|伪元素选择器
在 less 中 交集|伪类|伪元素选择器 的写法与 css 不同，需要利用 & 进行连接。
// css 的写法
a:hover{
color:red;
}
// less的写法 & 代表父元素 a
a{
&:hover{
color:red;
}
}
5、less 运算
在 less 中，任何数字、颜色或者变量都可以参与运算，less 提供了+ 、- 、 * 、/ 的算术运算。但要注意的是：运算符的左右两边都必须有一个空格，而且对于两个不同单位之间的运算，运算结果取第一个值的单位。如果两个值之间只有一个值有单位，则运算结果就取该单位。
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
四、rem布局
1、思路
使用媒体查询根据不同设备的不同尺寸按比例设置 html 的字体大小，然后页面元素使用 rem 做尺寸单位，当 html 的字体随屏幕大小变化而发生变化时，其他页面元素也会随之等比例的变化。
我们比较常见的手机尺寸有：320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px。就是这么令人头秃。
可使用的技术方案有两种：① less + rem + 媒体查询 ② flexible.js + rem ，其中方案②使用起来更简单。
2、less + rem + 媒体查询
思路：
① 假设 屏幕宽度为 750px ，我们把整个屏幕分为15等份（划分标准随意）。
② 把一份屏幕的大小作为 html 字体的大小，此时就是50px。
③ 那么同理，在320px宽的设备中，字体的大小就 320/15 就是 21.33px。
④ 我们我们用页面元素的大小除以对应的 html 文字的大小 会返现他们的比例是相同的，此时我们就实现了页面元素的等比例缩放效果。
⑤ 一个100 * 100像素的页面元素在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2rem 比例是1比1。在320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
总结：
① 公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
② 屏幕宽度 / 划分的份数 就是 html 字体的大小。
案例：
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1. 首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值 = 页面元素在 750像素的下px值 / html 里面的文字大小 */
3、flexible.js + rem
思路：
flexible.js 是手机淘宝团队出的简洁高效 移动端适配库，是我们不需要再写不同屏幕的媒体查询，它内部已经进行了处理。它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们只需要定义韩我们的 html 字体大小即可，其他都可以交给 flexible.js 去做。
总结：
① flexible是默认将屏幕分为10等等份
② 如果我们想要修改默认设置，我们可以通过媒体查询设置一下，然后把样式权重提到最高。
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
