关于相对字体大小rem的使用

我在这里只是说具体的用法,在HTML页面使用rem单位,首先设置一个页面的基本字号的字体,这个字号最好设置在HTML便签里,如下:
html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

html{

font-size: 62.5%;/*font-size:10px;  这是覆盖浏览默认字体进而设置基准字体大小*/

-webkit-tap-highlight-color: transparent;

}
body {
    font-size: 1.6rem;
    line-height:1.6;
}
我就以提问题的方式说说关于单位在移动页面中的一些常识

为什么设置text-size-adjust:100%;?

iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.

为什么设置font-size: 62.5%;?

这是将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px —— 为了计算方便。然后在body 上应用了 font-size: 1.6rem;,将页面字号设置为 16px。当然并不是所有浏览器的默认字号都是16px;

rem 和 em 有什么区别?

 em 根据上下文变化不同,rem 只跟基准设置关联,只要修改基准字号,所有使用 rem 作为单位的设置都会相应改变。

最后在使用过程中应该视情况而定,一些需要根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px

在这里提供一个px,em,rem单位转换工具

http://pxtoem.com/

原文地址:https://www.cnblogs.com/wjh0916/p/4708323.html