移动适配，媒体查询

网页元素的宽高，都要随着设备的宽度等比缩放。

设备宽度大，网页元素的宽度就增大，设备宽度小，网页元素的宽度就变小。

面试题：HTML网页的根是谁？

答：html标签

1rem=1HTML字号大小（HTML字号又称为根字号）

媒体查询 示例

@media (width:375px) {
            html {
                font-size: 40px;
            }
        }

@media (width:320px) {
            html {
                font-size: 32px;
            }
        }

 

设备宽度不同，HTML标签字号设置多少合适？

目前rem布局方案中，将网页等分成十份，HTML标签字号为视口宽度的1/10

@media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }

 

rem适配问题

根据设计师给的设计稿，确定当前设计稿对应的是哪块屏

//w 68px h29px//

设计稿375px，HTML37.5px

rem单位尺寸=px单位数值/基准跟字号（1/10视口宽度）

rem=68/37.5

flexible

flexible.js是手机淘宝开发出的一个用来适配移动端的js框架

核心原理就是根据不同的视口宽度给网页中的html节点设置不同的font-size

需要flexible.js文件的同学可以私信作者领取。