手淘rem适配方案-CSDN博客

前置知识：什么是rem

CSS3新增的一个相对单位rem（root em,根em）.rem是相对于根节点（或者是html节点）.如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px。

前置知识：什么是dpr

在浏览器控制台中输入

window.devicePixelRatio
复制代码

可以获取当前设备的dpr

那么什么是dpr?

dpr就是设备物理像素与逻辑像素(css像素)的比例.

那么设备物理像素是固定的,比如macbook pro 13.3寸是显示屏分辨率是2560 x 1600,这个2560就是当前设备的物理像素,而浏览器全屏幕宽只有1280,这个就是逻辑像素,dpr所表示的就是：1280的浏览器被扩展成2560像素宽度,2个物理像素对应一个逻辑像素.

再比如在开发中,一张设计好的宽度为100px,高度为50px的图片,再dpr值为2的设备中,宽度设置为100px的话,他实际会被扩展到200像素宽度,只有设为50的时候才会正常显示.

dpr有什么影响？

开头说过

再比如在开发中,一张设计好的宽度为100px,高度为50px的图片,再dpr值为2的设备中,宽度设置为100px的话,他实际会被扩展到200像素宽度,只有设为50的时候才会正常显示.
复制代码

自从苹果R屏问世之后,颠覆了dpr值规定为1的思想,苹果R屏的dpr有可能为2,也有可能为3.其余的除了苹果R屏手机,dpr皆为1.再根据此思路,手淘的对应的代码如下：

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,3和3以上的屏,用3倍的方案,2用2倍方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}
复制代码

当我们拿到这个scale之后,再动态的改变meta标签的值,就能有效的规避这个问题了

var metaEl = doc.createElement('meta');
var scale = 1 / dpr;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}
复制代码

这里的scale会对应着dpr的不同而别分划分,dpr的scale为0.3,3的则为0.33333..

动态计算根节点font-size

这里手淘是采用了如果是平板设备,则根节点font-size属性统一采用 540 * dpr / 10 来计算的.除开平板设备,会根据当前设备的屏幕宽来计算

function refreshRem() {
  var width = docEl.getBoundingClientRect().width;
  // 适配平板
  if (width / dpr > 540) {
    width = 540 * dpr;
  }
  var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}
复制代码

还原视觉稿

试想一下,因为rem是相对单位,只要根元素的font-size属性随着设备自适应,那么以rem为单位的属性也能做到自适应！

手淘的还原方案

这里以一份设计稿宽高为750 * 1334为例子,拿到设计稿后,可以将设计稿分为100份,每一份为单位a,那么每一份就是7.5,而1rem相当于10a,可以推算出：

1a = 7.5px
1rem = 75px
复制代码

此时以基准值75为例,一张设计稿中尺寸为286 * 286的图片的转换规律为

286 / 75 = 3.813333rem
复制代码

如何转换rem

如果没有使用任何预编译样式语言或者打包工具的话,目前能想到的方案就是手动计算rem.当然没有使用工具都是比较坏的情况,那么可以看下分别使用预编译样式语言和打包工具的计算：

less:

@font-size-base: 75;
body {
  width: 750rem/@font-size-base;
  height: 640rem/@font-size-base;
}
复制代码

webpack:

对于使用webpack的来说,其实也是有一个postcss插件的px2rem,可以很轻松的配置相关属性,转换成相对于的rem单位.比如我们的.postcssrc 配置如下：

module.exports = {
  "plugins": {
    "postcss-px2rem": {
      baseDpr: 1,
      remUnit: 37.5,
      onePxComment: '1px',
      forcePxComment: '!px',
      keepComment: '!no',
      forcePxProperty: ['font-size'] // font-size强制使用px单位
    }
  }
}
复制代码

在完成配置后,你可以如下使用：

.demo {
  width: 150px;
  height: 150px; 
  font-size: 12px; 
  border: 1px solid #ddd; 
}
复制代码

px2rem处理之后将会变成：

.selector {
    width: 2rem;
   height: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 12px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}
复制代码