rem 单位与移动端的适配

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

前言

兄弟们，大家都放假了吗？鄙人已经到家开启过年模式，但是每天学习不能停。因为我们的项目主要是放在手机和paid上运行的，所以前端会做相应的适配，今天就研究一下这些细节~

背景

不同的手机宽度都有差别，尺寸从320px到360px、375px、414px不等。不同的设备宽度给布局带来不小的困扰，虽然弹性布局和网格布局具有宽度自适应，可以保证布局不乱，但是对于一些和文字相关的体验，它们也无能为力。比如：16px大小的文字在375px宽的手机屏幕上显示看起来正合适，但是面对414px的宽度就会显得偏小，阅读体验就不是很好。

rem

上述问题如何解决呢？那就要用到一个CSS3的单位--rem。其中的r代表root,在HTML网页中，root指的就是html元素，例如：

html{
    font-size: 16px
}

则0.5rem就是8px，1rem就是16px。 如果根字号大小为20px:

html{
    font-size: 20px
}

则0.5rem就是10px，1rem就是20px。
所以想要让整个网页保持弹性布局很简单，把元素的宽高和字号的大小单位统一，都用rem，然后在不同的宽度的设备上准确地设置根字号的大小就行。
有如下两种做法：

• 设定临界点字号

html{
    font-size: 16px
}
@media(min-width:414px){
    html{
        font-size: 18px
    }
}
@media(min-width:600px){
    html{
        font-size: 20px
    }
}

• 头部嵌入JS代码，根据屏幕尺寸设置对应的根字号大小

document.documentElement.style.width = document.documentElement.clientWidth/7.5 + 'px';

总结

这两种做法都有不足之处，第一种对于非临界点尺寸的设备很不友好；第二种优点在于任何宽度对手机都有对应的根字号设置，但是缺点是根字号会线性放大，一些设备上会很夸张，并且后续想要做其它适配改动也会非常大。所以还有更好的方式，明天继续~