设备兼容与分辨率|font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配 css3|class

面对不同设备的适配与响应；这里介绍不同的是@media规则进行匹配不同的设备；
不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单位 - rem；
*其中“r“代表的是root的意思，在HTML网页中，root指的就是元素，正如CSS伪类:root的目标元素和html属性选择器一样；*例如：

html { font-size: 16px; // 1rem = 16px }

使用rem的基础，可衍生出下面的俩种方法
（1）. 可使用@media设定临界点，来设置字号,代码如下：

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

（2）.头部嵌入javaScript代码，根据屏幕尺寸设置对应的根字号大小；

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

社区的相对单位

vw 社区宽度百分值
vh 社区高度的百分值

calc()函数下的最佳实践结合vw单位与calc()函数进行计算，无需使用任何的JavaScript代码，可实现基于设备宽度的移动端布局；代码如下：

html { font-size: 16px; } @media (min-width: 375px) { html { /* 375px作为16px的基准,414px宽度时正好对应18px的根字号大小 */ font-size: calc(16px + 2 * (100vw - 375px) / 39); } } // 如果设备是414px， 100vw == 414px；根字号为18px @media (min-width: 414px) { html { /* 414px作为18px的基准,根字号大小累加增加4px （18px - 22px） */ font-size: calc(18px + 4 * (100vw - 414px) / 586); } } @media (min-width: 1000px) { html { /* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */ font-size: calc(22px + 5 * (100vw - 1000px) / 1000); } }

【设备兼容与分辨率|font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配】声明：rem单位并不是万能的，首先主要的问题是尺寸并不总是整数的问题；在个别的屏幕下会出现渲染问题，例如：边缘出现奇怪的间隙，渲染高度误差及模糊的问题；但这些都是极小的问题体验，可控的范围内处理；rem还是不错的适配之选；