1、css常用的长度单位：
px：像素单位这是一个固定单位、
%：百分比单位，参照单位参照父元素、
em:参照单位，参照父元素如果有定位就参照有定位的父元素，文本缩进（text-indent：）时使用，1em=16px，1em=一个中文字符、
rem:参照单位参照根元素（html）的字体大小，手机端页面一律用rem
deg:角度单位，transform: rotate(45deg)：使相应的元素顺时针方向旋转45°。
2、视口代码，只要是做手机端页面必须加这段代码:
```
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;minimum-scale=1.0 user-scalable=no;">
```
- viewport：可视区域的窗口
- width=device-width：可视区域窗口的大小等于设备的分辨率
- initial-scale：初始的缩放比
- maximum-scale：最大的缩放比
- minimum-scale:最小的缩放比
- user-scalable=no：不允许移动端用户手动缩放。默认值为yes
3、不同手机适配
不同的手机页面的元素大小是不同的所以要达到不同大小的手机用户体验要达到最好的rem这个单位就能达到这个效果，如果用像素单位尺寸就固定死了，元素的大小不会随着分辨率的变化改变。例如谷歌浏览器根元素HTML默认字体大小font-size=16px这时1rem=16px,单位换算起来就很不方便所以我们会规定一个新的HTML的font-size=100px覆盖默认的font-size=16px，所以这时1rem=100px换算起来就会很方便。
4、主流参照机型设计稿大小：
iphone5 320 * 568 DPR（设备的像素比）：2.0 设计稿:640 * 1136
iphone6 375 * 667 DPR ：2.0 设计稿:750 * 1334(最常用)
iphone6P 414 * 736 DPR ：3.0 设计稿:1242 * 2208
5、参照iphone6设计稿 750 * 1334，当窗口改变时font-size是可以计算的
窗口大小： 750 320 414 640
HTML{font-size} 100 ? ? ?
6、计算窗口变化的js代码
<script type="text/javascript">
// 针对750的设计稿
function refreshRem() {
var desW = 750,
winW = document.documentElement.clientWidth,
ratio = winW / desW;
document.documentElement.style.fontSize = ratio * 100 + 'px';
}
refreshRem();
window.addEventListener('resize', refreshRem);
</script>
7、css带@的：
@import"css文件":css导入式
@keyframes 动画名称{关键帧}
@media screen and (max-width: px){ }：媒体查询，有一定条件的覆盖。
8、@media关键词：
1、@media：媒体、媒介；2、媒体类型：all(所有)、screen（设备）、print（打印设备）；3、连接符：and(和)、not(非)、only（仅仅）4、（判断条件）：max-width、min-width；5{css代码块}
9、媒体查询 （@media）会做到当窗口大小改变时页面的结构会随时改变{膜拜官网、华为云}
10、rem
假设一个750 * 1334(最常用)的设计稿为了方便计算我们让根元素font-size=100px，当窗口的大小改变时根元素font-size会改变，所以我么就需要写很多个媒体查询区间并且不精准达不到完全适配。所以就需要上边的js代码来计算窗口的大小，根元素font-size大小会随时改变，就会达到移动端完全适配。
