css单位之rem APP页面适应设置

时间:2017-12-12 07:21来源:未知 作者:文竹 点击:
首先要明白一点,rem是一个相对的单位,而且是相对于根元素html的字体大小来计算的。先看下图


可以看到,10像素的时候,hmtl的值为62.5%,16像素的时候,html的值为100%;,也就是说默认值是16像素大小的。
那么我们为了方便计算,可以用10像素为基准,把html设置为62.5,可得到以下结果。看下面的例子。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
 h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
可以看到,要设置字体大小,只要除以10就得到rem为单位的值,很方便。
所以在APP页面中,使用rem作为单位,再也不用作用百分比,也不用JS各种计算来达到兼容效果了。超级方便。
  • 上一篇:没有了
  • 下一篇:没有了