移动端应该如何动态设置字体大小？

em由来： font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：

1.px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。

2.好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。

3.知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。

在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：

1. 物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2.逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3.设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px但是换到手机上却变小了？因为DPR啊啊啊，大哥~。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1.在JavaScript中，通过 window.devicePixelRatio 来获取

2.在css中，可以通过 -webkit-device-pixel-ratio ， -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：

一，用媒体查询来设置html的font-size：

二、利用js来动态设置

我要说的是最后一种，也是我认为目前比较好的实现方法：

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的 font-size ，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

转自 https://segmentfault.com/a/1190000004189237?_ea=522147

首先了解下px，em，rem的区别

px（像素）是绝对单位，页面按精确像素展示，使页面较稳定和相对固定一些。但这种方法存在一个问题，用户在浏览我们制作的web页面时，如果他改变了浏览器的字体大小，或是缩放、放大页面，这时会使页面布局被打乱。

em是相对单位，基准点为父节点字体的大小。上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。

例如con2的父元素为con1，css中<strong>con1</strong>和<strong>con2</strong>的font-size都设置为2em；

可以看得出con1和con2的font-size样式都是2em，但是展现出来的字体大小不一样,因为默认情况下没有对字体进行重新设置的话，浏览器默认字体为16px，con1的2em就相当于32px，那么con2的2em就相当于con1的两倍也就是64px，所以con2字体比con1的大。

rem是相对于页面根元素的大小单位，我们只需给页面的根元素设置一个参考值，就可以在页面中根据参考值设置其他元素的大小，rem不会出现嵌套的繁琐。

设置html下1rem=10px

可以看得出1rem就是12px（浏览器下最小的字体为12px，当设置小于12px的字体，也默认为12px）

无论元素处于哪一层，都不会受到父元素的影响。

---