rem 适配

1 em 和 rem

em ： CSS长度单位， 默认字体大小的倍数； 如果元素上默认字体大小为 16px，2em 的长度就是 32px;

rem： CSS长度单位， 根元素字体大小的倍数，只有根元素字体大小有关； html 中的根元素即 html 元素

大部分浏览器默认字体大小为 16px；

设备繁多并不能保证所有浏览器默认字体大小相同，比如 MacOS下Firfox默认字体 15px， 老版本IE默认字体大小 20px

2 rem 适配原理

• 长度单位都是用 rem 来就行设置
• 当屏幕尺寸改变，只有修改 html 元素的 font-size 即可实现等比适配
• 我们在制作页面的时候，只考虑跟设计稿相同的屏幕尺寸即可，其他尺寸屏幕自动适配

3 实现方案一 借助media

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

此种方式，对屏幕划分了不同的范围

4 实现方案二 JS动态修改根元素字体大小

var designWidth = 375;  // 设计稿宽度
var rem2px = 100;                // 在屏幕宽度375px，的时候，设置根元素字体大小 100px

// 根据屏幕宽度 动态计算根元素的 字体大小
document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';

• 上面代码，我们设置根元素 font-size 为 100px；100计算比较容易；

• 比如某个元素，设计稿设计宽度为 300px， 我们需要设置 width: 3rem

• 比如某个元素，设计稿设计字体大小是 14px， 我们需要设置 font-size:0.14rem

5 实现方案三 JS动态修改配合CSS预处理器 (推荐)

@rem:750/16rem;

.header {
  width: 750/@rem;

  .header-image {
    margin:48/@rem 32/@rem 36/@rem 48/@rem;
    width: 128/@rem;
    height:128/@rem;
    border-radius: 4/@rem;
  }
}

(function(){
  //屏幕宽度
  var width = window.innerWidth;
  //创建style标签
  var styleNode = document.createElement('style');
  //设置 font-size 的值， 会根据屏幕动态变化
  styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}'; 
  document.head.appendChild(styleNode);        
})();

此种方式，理解起来较为复杂

但是，制作页面过程为无需对设计稿的 px 大小进行转换， 只要把单位变成 /@rem 即可，数值不变

当然，此种方式必须借助于CSS预处理器，像less、sass、stylus等

6 rem适配的优缺点

优点： 使用了完美视口，实现了等比缩放

缺点： 换算稍微复杂(相对)

7 一点小小的建议

第一点 尽量不要对html设置百分比字号

原因如下：

• 并不能保证所有的浏览器的默认字体大小都是 16px；
• 用户是可以设置浏览器默认大小的；

第二点：字体大小不要小于 12 px

原因如下：

• Chrome 浏览器字体大小小于 12px， 会按照12px进行计算；