REM——适合移动开发的自适应方案

傷城~ 2022-03-15 15:52 266阅读 0赞

### 文章目录 ###

*   *  1.什么是REM
     *  2.REM和EM的区别
     *  3.手机端方案的特点
     *  4.使用JS动态调整REM
     *  5.REM与其他单位同时存在

--------------------

## 1.什么是REM ##

先来认识几个常见单位：

*  px：像素，这个大家都知道。
 *  vh：viewport height，视窗高度，是指占整个浏览视窗高度的百分数。
 *  vw：viewport width，视窗宽度，是指占整个浏览视窗宽度的百分数。
 *  em：一个大写字母M的宽度（有时候也说一个汉字的宽度，但其实是错的），多少em是指大写字母M的宽度的倍数

而rem（Root em） ，理解过来是指根元素（`<html>`标签）中的`font-size`，虽然**rem中有em但是这里两个单位没有任何关系**，这里需要特别注意。  
举个例子，chrome默认字体大小为16px，如果不设置`html{font-size:XXpx}`,所以在这时**1rem就是16px**，

## 2.REM和EM的区别 ##

**首先两者什么关系都没有！**  
em是指自身的`font-size`的倍数，这里举个例子

html { 
    	font-size:16px; ｝ p { 
    	font-size:12px;
    	height:2em;	/*2 x 12 = 24px*/
    	width:2rem; /*2 x 16 = 32px*/
    }

## 3.手机端方案的特点 ##

由于分辨率不统一，不同品牌不同设备的屏幕显示比例不同，移动端开发需要做适配的话只能使用等比例放大缩小来进行（这里不考虑响应式，只是在接近的分辨率中进行比较）。

## 4.使用JS动态调整REM ##

如果想通过缩放来显示内容，就必须与显示的宽度（`innerWidth`）有关系。但是像上面的说的，这几个单位除了`vw`之外都和显示宽度没有关系。然而，`vd`目前浏览器兼容性很差，别说手机，就是电脑浏览器都有些不兼容。因此，就有人想出使用JS来获取显示宽度进行设 置。只需要在html页面中，加载css文件之前添加以下代码

在此之后可以利用**1rem=innerWidth**来进行布局，这个时候**1rem=100vd**。如果觉得小数太小了写着不方便也可以取`font-size==｛doucment.innerWidth/10｝`,注意，这里不要用100的，因为有的浏览器会设置最小字体，比如chrome浏览器默认最小为12px，当设置小于这个值的时候会不生效

## 5.REM与其他单位同时存在 ##

当使用rem的时候不影响其他的单位使用，有时候考虑到以rem为单位的换算成px可能不到一像素，这个时候还是使用px为单位。