彻底弄懂rem，px高度如何在不同的手机屏幕下自动换算

转：https://www.cnblogs.com/liu-di/p/11254583.html

一、rem介绍

rem是什么？

它的全称是 font size of the root element （根元素的字体大小）
它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。

浏览器的默认字体？

浏览器的默认的font-size是16px，1rem默认就等于16px。（chrome最小字体为12px）

rem可以做什么及它的应用场景？

用来做web app的屏幕适配，因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案。

设置的font-size来改变rem尺寸

 :root{
      font-size:20px;
     }
.box{
      width:1rem;
      height:1rem;
      background-color:purple;
    }

将根元素html的font-size设置为20px，此时box的宽高都为20px，也就是1rem = 20px

##二、步骤 ###1. 首先用js根据不同的视窗宽度动态的改变根元素的font-size ``` //获取视窗宽度（兼容性写法） let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;

//获取html元素
let rootDom = document.querySelector('html');

//动态设置html的font-size（除以10是让浏览器的font-size达到比较合适目的）
rootDom.style.fontSize = rootWidth / 10 + 'px';

<br>
###2. 根据设计师的设计稿中的px单位转换成rem单位
<br>
####如何正确的通过px值计算rem值
<br>
**px单位  /  font-size【动态】 = rem单位【动态】 （错误的想法，有的小伙伴迷糊在这里）**
**px单位 / font-size【固定】 = rem单位【固定】 （正确的想法，有的小伙伴可能开始想不明白）**
***这里要注意的是你计算的font-size是固定的，而不是html的font-size是固定的，很多新人困惑在这里***
<br>
<br>
**错误的计算方法：（动态font-size）**
**200px /     (320 / 10)【iphone5】 = 6.25rem**  
**200px /     (375 / 10)【iphone6】 = 5.333rem**
**200px /     (768 / 10)【ipad】       = 2.604rem** 
<br>
**这样的话**
**在【iphone5】下6.25rem 就是200px**
**在【iphone6】下5.333rem 就是200px**
**在【ipad】下2.604rem 就是200px**
<br>
我们通过了***（图纸的px值 和 动态的font-size值）求出了动态的rem***
<br>
**按照这样的方式设置rem，在不同的尺寸的机型下都是500px，那我还不如直接写死500px，因为屏幕的尺寸大小都是不同的，所以我们这样做毫无意义。（相当于我们根据一个固定的px值求不同机型下的rem值）。**
<br>
<br>
**正确的计算方法：（固定font-size）以iphone6为基准**
**200px /     (375 / 10)【iphone6】 = 5.333rem**  
<br>
**这样的话**
<br>
**在【iphone5】下5.333rem 就是170px**
**在【iphone6】下5.333rem 就是200px**
**在【ipad】下5.333rem 就是410px**
<br>


**也可以以【iphone5】为基准**
**200px / (320 / 10) 【iphone5】 = 6.25rem**
<br>
**这样的话**
<br>
**在【iphone5】下6.25em 就是200px**
**在【iphone6】下6.25rem 就是234px**
**在【ipad】下6.25rem 就是480px**
<br>
<br>
**这样就达到用rem来适配不同尺寸的屏幕了**
<br>
**我们以一种机型的font-size为基准，来计算出一个固定的rem，根元素html的font-size是动态的，所以这个rem值会根据不同机型的font-size达到适配的目的（注意：你参与计算的font-size值绝不能是动态的，否则毫无意义）。**
<br>
**设计师常选择iPhone6作为基准设计尺寸，我们一般以iPhone6为基准**