移动端自适应rem的设置

Posted 2020-10-08 Yukiee

一般所熟知的css样式大小单位有px，em。

px：精确地描述元素大小，不随屏幕大小的变化而变化；

em：相对于父元素的大小，如果有层层嵌套的话会导致这个值非常大或者非常小。

在写移动端页面的时候为了使页面能够适应多种尺寸的移动设备大小，通常会用rem来表示各个元素的大小。

rem：font size of the root element，即相对于根元素字体的大小。

因此，在开发页面之前，需要给根元素的字体指定一个值。

一般情况下，浏览器默认的根元素字体的大小是16px，因此为了方便计算，可以将根元素字体大小可以设置为

html{
     font-size:62.5%;
     /*16 * 62.5% = 10;根元素字体大小是10px*/
　　　/* */

}
h1{
　　font-size:1.2rem;/*h1字体的大小是12px*/
}

然后通过媒体查询针对不同的屏幕大小设置font-size的百分比，就可以实现前端页面适配了。

还有一种方法是将根元素font-size的大小设置成屏幕宽度的一定比，这样通过不同屏幕打开时1rem的值自然也就不一样了。

document.getElementsByTagName(‘html‘)[0].style.fontSize = window.screen.width /10 + ‘px‘;

如果是iPhone5的尺寸，那么根元素字体大小就是32px；

如果是IPhone6的尺寸，那么根元素字体大小就是37.5px；

但是这样我们在设置各个元素大小的时候就很难换算了啊。没关系，css编译工具可以解决这个问题。以less为例：

设置一个函数，假设设计图是iPhone的尺寸，设计图上p的字体大小是12px，那么p在不同屏幕的字体大小就是(12/37.5)rem。

.fs(@px){
    font-size:unit(@px/37.5,rem);  /*37.5是设计图的尺寸对应的屏幕宽度除以10*/
}
p{
  .fs(12);
}

其他的宽度和高度也写成函数的形式。

 

因为某些低版本浏览器不支持CSS3或者默认字体不是16px，因此在PC端就不要再使用rem了。