前言

我们一般写移动端页面时，为了让页面适应各个尺寸，常常会给各个元素设一个相当单位

一般常用的css单位有px，em，rem

px: 多用于pc端，精准的描述元素大小，不随屏幕大小变化而变化，也可以说是一个绝对单位

em: 相对于父元素的大小变化而变化，在嵌套层次多的情况下会导致元素大小值偏大或偏小

rem: 全名也叫font size of the root element ,即相对于根元素的大小，常用来表示移动端元素大小

最近在开发移动端页面，针对rem谈谈其心得体会

rem使用方法

首先，在开发页面之前，我们需要给根元素赋一个font-size值，也就是rem基准值

<html  style="font-size: 37.5px;">...</html>

浏览器默认的根元素font-size值是16px

为了方便计算，我们可以设置一个按屏幕大小整数倍缩放的值，比如10倍

所以，对于iphone6的屏幕宽度375px，那么我们就可以将根元素的font-size设置为37.5px，缩小10个倍数

同样的，对于iPhone5屏幕的宽度320px，缩小10倍根元素的font-size就是32px

那缩放10倍是怎么定义的呢，其实这个值是随便定义的，假如不除以10，如果是除以100，这样在设置html的font-size时候会偏小，只有3.75px或者是3.2px等等，而

假设根元素的字体设置的大小是37.5px（按iPhone6屏幕尺寸缩小10倍），设计稿的宽度是按iPhone6的屏幕宽度375px定义的，设计稿中p的大小是12px，那么p应该设置的相对字体大小是(12/37.5)rem

如果设计稿的宽度是750px，设计稿中p的大小是12px，那么p应该设置的相对字体大小是(12/75)rem

为了将各个不同屏幕宽度根元素的font-size都缩小到屏幕宽度的10倍，可以在js中动态计算出当前屏幕所适配的font-size的大小

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

或

document.documentElement.style.fontSize = innerWidth/10 + "px"

或者用媒体查询设置

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

考虑到元素很多很难换算的情况，我们可以用css构建工具scss

@function px2rem($px){
    $rem : 37.5px;
    @return ($px/$rem) + rem;
}

当我们写具体的数值时，就可以写成

height: px2rem(90px);
width: px2rem(90px);;