rem与@media screen and (max-width: px){ }

一、css经常使用的长度单位：px：像素单位这是一个固定单位、 %：百分比单位，参照单位参照父元素、 em:参照单位，参照父元素若是有定位就参照有定位的父元素，文本缩进（text-indent：）时使用，1em=16px，1em=一个中文字符、 rem:参照单位参照根元素（html）的字体大小，手机端页面一概用rem deg:角度单位，transform: rotate(45deg)：使相应的元素顺时针方向旋转45°。 二、：视口代码，只要是作手机端页面必须加这段代码。 viewport：可视区域的窗口 width=device-width：可视区域窗口的大小等于设备的分辨率 initial-scale：初始的缩放比 maximum-scale：最大的缩放比 minimum-scale:最小的缩放比 user-scalable=no：不容许移动端用户手动缩放。默认值为yes 三、不一样的手机页面的元素大小是不一样的因此要达到不一样大小的手机用户体验要达到最好的rem这个单位就能达到这个效果，若是用像素单位尺寸就固定死了，元素的大小不会随着分辨率的变化改变。例如谷歌浏览器根元素HTML默认字体大小font-size=16px这时1rem=16px,单位换算起来就很不方便因此咱们会规定一个新的HTML的font-size=100px覆盖默认的font-size=16px，因此这时1rem=100px换算起来就会很方便。 四、主流参照机型设计稿大小： iphone5 320 * 568 DPR（设备的像素比）：2.0 设计稿:640 * 1136 iphone6 375 * 667 DPR ：2.0 设计稿:750 * 1334(最经常使用) iphone6P 414 * 736 DPR ：3.0 设计稿:1242 * 2208

五、参照iphone6设计稿 750 * 1334，当窗口改变时font-size是能够计算的 窗口大小： 750 320 414 640 HTML{font-size} 100 ? ? ? 六、计算窗口变化的js代码 七、css带@的：@import"css文件":css导入式 @keyframes 动画名称{关键帧} @media screen and (max-width: px){ }：媒体查询，有必定条件的覆盖。 八、@media关键词：一、@media：媒体、媒介；二、媒体类型：all(全部)、screen（设备）、print（打印设备）；三、链接符：and(和)、not(非)、only（仅仅）四、（判断条件）：max-width、min-width；5{css代码块} 九、媒体查询 （@media）会作到当窗口大小改变时页面的结构会随时改变{膜拜官网、华为云} 十、假设一个750 * 1334(最经常使用)的设计稿为了方便计算咱们让根元素font-size=100px，当窗口的大小改变时根元素font-size会改变，因此我么就须要写不少个媒体查询区间而且不精准达不到彻底适配。因此就须要上边的js代码来计算窗口的大小，根元素font-size大小会随时改变，就会达到移动端彻底适配。