移动端字体适配设置

750px 是 iPhone6 的物理像素，即屏幕分辨率

移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给

通过动态的获取设备独立像素，然后除以设计稿的宽度，然后设置 rem，来动态自适应字体大小

为什么要乘100，放大一些，便于计算，只需要将设计稿量出来的 px, 小数点向左移2位，即可转换成 rem

感谢邀请，如果帮助到您记得关注我哈~

PC端网页当中默认字体为宋体，我们再设计时候需要注意最小中文字12像素必须选择宋体，字的属性选择无。因为中文字只有12像素宋体效果无才能看清。大于12、14我们一般用黑体。最小英文Arial可以是9像素一般很少用。移动端ios我们设计字体为苹方，安卓我们就用黑体就可以。

首先了解下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）

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

---