彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

Posted 2020-12-20 duoge

　　rem 是相对文档根元素（html）字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size 变化而变化，那么在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。那么如何动态设置呢，看到很多文章都讲的是使用js获取设备屏幕尺寸来操作，而我在工作中一直使用的方法是通过设置文档根元素 font-size: calc(100vw/18.75) 来实现 rem 自适应。

　　以常见的750px的设计稿为例，如果想要规定1rem = 40px（基准值，后面会讲到），便是设置 html { font-size: calc(100vw / 18.75) }

　　其中，100vw是设备视口的总宽度，当设备的宽与设计稿的等宽时，则此时有：

　　100vw = 750px => 1px = 100vw / 750

　　如果设置基准值为 1px，则 1rem = 1px，代码则是 html { font-size: calc(100vw / 750) }

　　但是一般不会设置为1px，而是设置10px、20px或者40px，即1 rem等于10px、20px 或者 40px ，以 1rem = 40px为例，则此时有：

　　40px = 40 * 100vw / 750 => 40px = 100vw / (750 /40) => 40px = 100vw / 18.75 即 1rem = 100vw / 18.75,所以设置 根元素字体大小为 calc(100vw / 18.75) 即可。

　　现在 750px的设计稿中有一个400*200的div元素，我们在样式中如果写

　　div {
    　　width: 400px;
    　　height: 200px;
　　}

　　那么无论设备的尺寸如何，这个元素的宽高始终都是固定的400*200，缺少灵活性，所以需要使用 rem 单位做自适应，现在设置文档根元素字体大小为 calc(100vw / 18.75) }，即 文档中 1rem = 100vw / 18.75 ，

　　div {
    　　width: 10rem;
    　　height: 5rem;
　　}

　　当屏幕尺寸为 750px时，该元素的宽为：

　　10rem = 10 * 100vw /18.75

　　=>10rem = 10 * 750px / 18.75

　　=>10rem = 10 * 750px / (750 / 40)

　　=>10rem = 400px

　　当屏幕尺寸为 375px时，该元素的宽为：

　　10rem = 10 * 100vw / 18.75

　　=>10rem = 10 * 375px / (750 / 40)

　　=>10rem = 200px

　　可以看到，元素尺寸随着设备尺寸的变化，同时发生了变化，这就是 rem 自适应的能力。

　　第一次看这个方法，会觉得有点绕，为什么写样式的时候明明已经知道1rem等于多少px了，实际的rem却不是我们写样式时用来换算的那个值呢？根据我的理解，写样式时换算用的1 rem = 40px，称为基准值，先用这个基准值把设计稿的尺寸全部换算成单位为rem 的大小，然后当页面渲染时，根元素的字体大小会决定样式表生效时 1rem到底等于多少px，这时再把样式中的尺寸换算成以px 为单位的值。而我们设置根元素的字体大小时假定的1rem = 40px，也是用于换算的基准值40px,并不是页面渲染时1rem真的就等于 40px。

　　总结一下就是，在写样式时，我们不知道设计稿与实际显示设备的宽度关系，先假定设计稿与设备同宽，此时我们需要一个基准值来将设计稿上元素的尺寸换算成rem,同时设置根元素字体大小时也使用该设计稿本身的宽和相同的基准值，即我们换算用40px,那么在写calc时也是40px，即：

　　100vw = 750px => 1px = 100vw / 750=> 40px = 40 * 100vw / 750

　　其中750是设计稿的宽，当设计稿是其它尺寸时，记得要换成设计稿对应的宽，如1920px。当设备与设计稿不同宽时，通过rem会等比例变化元素的尺寸而自适应。

 

　　感觉自己懂了，但是写出来又感觉没讲清楚，有待进一步学习。