前端px与rem换算

r囧r小猫 2022-06-03 00:55 375阅读 0赞

### 1.为什么要使用rem？ ###

之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。  
例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。  
但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。  
  
Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。

### 2.通用换算和一些坑 ###

有时我们会看到有些使用rem的页面里会先给页面根元素一个样式：  
html \{font-size: 62.5%; /\*10 ÷ 16 × 100% = 62.5%\*/\}  
为什么是62.5%？  
  
  
大多数浏览器的默认字号是16px，因此1rem=16px，这样不方便我们px和rem的换算，假设1rem=10px，那么100px=10rem，25px=0.25rem。这样就好换算很多，于是就有了上面的10/16。  
  
  
如果是640的设计稿，需要除以2转化为和iphone5屏幕等宽的320。所以设计稿px单位/2/10转为rem。之后再媒体查询设置每个屏幕大小的font-size百分比，页面会根据上面设置的根font-size适配。  
  
  
看到这里是不是觉得一切很完美？然而，这里面有两个深坑：  
  
  
(1).我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size: 62.5%不成立。  
  
  
(2).chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差（下面给demo）。

**解决方案：**

将1rem=10px换为1rem=100px（或者其它容易换算的比例值）;

不要在pc端使用rem  
  
那么上面的页面根元素样式要改为：  
  
html \{font-size: 625%; /\*100 ÷ 16 × 100% = 625%\*/\}

再用总结得出的各分辨率媒体查询换算：

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
        html { font-size: 703%; }
    }
    @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
        html { font-size: 732.4%; }
    }
    @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
        html { font-size: 750%; }
    }
    @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
        html { font-size: 781.25%; }
    }
    @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
        html { font-size: 808.6%; }
    }
    @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
        html { font-size: 843.75%; }
    }

至此，坑填完。设计稿px换算直接/100即可得到rem值。

### 3.更精准健壮的换算 ###

然而，上面的625%大法除了有兼容性问题，也无法很好地根据不同设计稿精准适配，不是我们的最佳选择。

网易和淘宝分别有自己的一套适配方法，适配性也很完美。

![20171213161907073][]

基准值： 可以看到，无论页面以哪种手机比例缩放，body的width都是7.5rem。很明显，目前网易的手机端设计稿是基于iPhone6，750（设计师给的设计稿是物理分辨率，会是我们写样式的逻辑分辨率的两倍，如果给的设计稿是640，那么是基于iPhone5，320），且基准值是100px（750/7.5=100）。这个基准值很关键，后面的css换算，都和这个基准值有关。动态font-size： 我们看到图1的font-size都有根据屏幕大小而动态改变，可以推算出公式：  
  
  
屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50）  
  
  
获取到这个值，再赋给html元素的style：  
  
  
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;  
这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。  
  
  
上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。  
  
  
> Px/100=rem，所以100px=1rem,25px=0.25rem

### 3.淘宝手机端Flexible ###

**引入：** 直接引用阿里的CDN文件（或下载到本地引入）  
  
  
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible\_css.js,flexible.js"></script>  
**设定：** 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。  
  
  
**换算：** 假设拿到的设计稿和上述网易的一样都是750，Flexible会把设计稿分为10份，可以理解为页面width=10rem，即1rem=75px，所以根font-size（基准值）=75px。  
  
  
之后的css换算rem公式为：  
  
  
px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem

### 4.换算工具 ###

[http://www.ofmonkey.com/front/rem][http_www.ofmonkey.com_front_rem]

[20171213161907073]: /images/20220603/a61d362dc3aa4b35b84e48688828babe.png
[http_www.ofmonkey.com_front_rem]: http://www.ofmonkey.com/front/rem