（1）使用媒体查询更改HTML的font-size值

 

　　（2）页面中所有布局使用rem单位布局

 

　　缺点：不能精细的适配到每一个设备，代码量较大

 

　　原理：媒体查询获取不同的设备，在不同的设备当中更改根节点的字体大小

 

　　之前讲过了媒体查询和rem的布局，但是有没有发现工作量很大呢，所以下面就详细说下这几种布局方式；

 

　　html和rem的适配

 

　　（1）使用vw单位作为 HTML font-size的单位（计算）

 

　　（2）页面所有布局使用rem单位

 

　　原理：屏幕大小变化的时候，用vw作为单位的值也会跟着改变，用vw作为根节点的字体大小的单位，所以在不同的屏幕大小或者设备中，根节点的字体大小的值就不一样，rem单位得到的值就不一样

 

　　（1）在vscode中的扩展安装cssrem插件，文件—》首选项—》设置—》（搜索cssrem，改变rootfontsize为设计图 / 10的数字）

 

　　（2）在页面中使用script标签引入rem.js文件（在js文件的18行把数字改为设计图的大小）

 

　　（3）在页面中的布局，量出多少值就写多少，然后使用它转换的rem的值

 

　　原理：通过js获取设备的宽度，来计算根节点的字体大小，rem得出来的值就不一样，就到达不同页面能适配

 

　　（1）使用sass的函数：

 

　　@function vw（$px） {

 

　　？ @return （$px / 设计图的宽度） * 100vw;

 

　　}

 

　　（2）页面中布局

 

　　header {

 

　　？ height: vw（量出来的值）;

 

　　？ background: green;

 

　　？ font-size: vw（48）;

 

　　？ }

 

　　移动端布局使用的单位有哪些？

 

　　em、rem、%、vw、vh

 

　　上面都是相对单位，可以根据viewport的变化，进行实时的改变；

 

　　补充：

 

　　用vw作为单位的时候，是会根据窗口的变化 值跟着改变的

 

　　根节点使用的字体大小使用vw作为单位，窗口变化的时候，根节点的字体大小也跟着改变

 

　　页面中所有使用rem单位布局的值都会跟着改变

 

　　这样就达到不同的窗口 元素的尺寸不一样

 

　　根节点的字体大小的设置根据 设计图的大小来设置

 

　　注意：

 

　　rem:根据根节点字体大小的倍数

 

　　vw:视窗的宽度的百分比 1vw = 视窗宽度的1%

 

　　因为 % 不能为font-size的单位

 

　　vw单位 1vw = 屏幕宽度 / 100 = 1%的屏幕宽度

 

　　vh单位 1vh=屏幕高度 / 100 = 1%的屏幕高度

 

　　但是width：100% == width：100vw；（不准确！！！）

 

　　ppi：pixels per inch 像素密度、每英寸所拥有的像素数量；

 

　　dpi：dots per inch 每英寸点数、指每英寸的像素

 

　　dpr：设备像素比 = 物理像素 / 逻辑像素（物理像素是设备显示的，而逻辑像素是css设置的）

 

　　移动端一般设计图大小：

 

　　640px / 750px / 1080px

 

　　根据设计图大小确定dpr的值：

 

　　如过设计图为640px —— dpr为2如果设计图为750px ——dpr为2如果设计图为1080px ——dpr为3

 

　　好了，这点非常重要：

 

　　以设备的宽为320px为例：给html设置width：100px ，此时元素宽为3.2rem值时充满这个宽度

 

　　而给元素设置为 100vw 充满这个宽度 所以又等于320px，所以等价于 ：

 

　　100vw：320px = ？vw ：100px

 

　　？vw 就等于 100 * 100 / 320 = 31.25 vw

 

　　为了方便理解看如下三段代码：

 

　　注意：此时的320px是设备宽度，不是设计图的大小尺寸

 

　　总结如下计算：

 

　　如果设计图为640px，给html设置font-size：31.25vw，如果在设计图中量出来的元素大小为宽76px，高54px，则实际写代码里面的宽高是 76px / dpr 2 = 38px ，38px / 100 = 0.38 rem；

 

　　如果设计图为750px，给html设置font-size：26.67vw，如果在设计图中量出来的元素大小为宽76px，高54px，则实际写代码里面的宽高是 76px / dpr 2 = 38px ，38px / 100 = 0.38 rem；

 

　　或者这样记忆：

 

　　100px ？ vw

 

　　750px 的设计图 对应的 设备是 375px

 

　　100vw = 375px

 

　　26.67vw = 100px

 

　　640px 的设计图 对应 设备是 320px

 

　　100vw = 320px

 

　　31.25vw = 100px

 

　　1080px 的设计图 对应的设备 是 360px

 

　　100vw = 360px

 

　　27.78vw = 100px

 

　　注意只需要改变html的font-size的值就可以了；