移动端页面字体——rem的使用

浏览器的默认字体高是16px。

• 兼容性：

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

对于不支持的浏览器，要多写一个绝对单位的声明，这样浏览器就会忽略用rem设定的字体大小。

• %

css中的body先全局声明font-size=62.5%，%的算法和rem一样。

因为16px=100%，1px=6.25%，所以10px=62.5%。

1rem=10px，所以12px=1.2rem。px与rem的转换倍率是10，很方便。

•  使用方法

rem是相对于根元素html的font-size，所以设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。

一般情况下，这样使用：

html{font-size:62.5%;} 
body{
             font-size:12px;
             font-size:1.2rem ;    /* 为兼容不支持rem的浏览器，要在rem前写上对应的px值，不支持的浏览器可以优雅降级 */
} 
p{
             font-size:14px;
             font-size:1.4rem;
}

 

• 优点

其他元素字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法：

@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}

这样就可以仅改变html的字体大小，其他字体具有“响应式”。。。

 

刚刚忘记写了，之前有看到使用em设置字体大小的，不过比较而言， rem比em要方便多了，因为em 的计算是基于父级元素的，在实际使用中给计算带来了很大的不便。而rem不用担心父级元素的 font-size，可以放心使用。

 

附加：：：：：：：：：：：

谈rem不谈base font毫无意义，谈base font不谈屏幕尺寸也毫无意义。

/*手机端的标准字体大小为16px*/
html {
    font-size: 16px;
}

@media only screen and (min-width : 320px) {

}

/*当屏幕宽度大于480像素时，将采用以下字体大小为标准大小，下同*/
@media only screen and (min-width : 480px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (min-width : 768px) {
    html {
        font-size: 20px;
    }
}

@media only screen and (min-width : 992px) {
    html {
        font-size: 20px;
    }
}

@media only screen and (min-width : 1200px) {
    html {
        font-size: 22px;
    }
}

这里所设置的字体大小不会影响到你的任何直接定义为px的字体大小，这里的字体大小只有在一种情况下发生作用，那就是使用rem的时候。

注意：调的时候的顺序要搞清，不要两边来回乱调，一定要手机优先，先在小屏幕上用px确保字体显示正常了，再放到大屏幕上看，如果哪块需要放大字体，再回到小屏幕上，改写为rem，然后再放到大屏上看。