这是我参与「第四届青训营 」笔记创作活动的的第10天
em单位
em是一个相对单位，em是相对于父元素的字体大小，10em就是父元素字体大小的10倍.
rem 单位
rem的基准是html元素的字体大小，10rem 就是 html元素的10倍
rem的优点 是可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制
媒体查询
使用 @media查询可以针对不同的媒体类型定义不同的样式，
@media可以针对不同的屏幕尺寸设置不同的样式。
媒体查询的类型
| 值 | 解释 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕、平板电脑、智能手机 |
关键字
- and: 将多个特性连接到一起，相当于且的意思，
- not : 排除某个媒体类型 相当于非的意思。
- only： 指定某个特定的媒体类型，可以省略
媒体查询一般按照从大到小或者从小到大的顺序来
引入资源
根据不同的设备 来引入不同的css文件
<link rel="stylesheet" href="style320.css" media="screen and(min-width:320px)"
rem适配方案
1、让一些不能等比自适应的元素，达到当前设备尺寸发生改变的时候，等比例适配当前设备、
2、使用媒体查询根据不同设备按比例设置html字体大小，然后根据页面元素使用rem做尺寸单位，当html字体大小变化时，元素尺寸也会发生变化，从而达到等不了缩放的适配
rem实际开发适配方案
1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）
2、css中，设计稿元素的宽高相对位置等取值，按照同等比例换算为rem为单位的值**
技术方案 1： less 媒体查询 rem
技术方案2： flexible.js rem
设计稿常见宽度
| 设备 | 常见宽度 |
|---|---|
| iphone4 5 | 640px |
| iphone6 7 8 | 750px |
| android | 常见的320px 360px 375px 384px 400px 414px 500px 720px |
| 一般情况下，我们以一套或者两套效果图适应大部分的屏幕。放弃极端屏 或对其优雅降级，现在一般以750为准 |
