概述
早期前端项目中使用了flexible解决移动端适配问题，并且通过px2rem将px进行转换rem。
flexible中将页面分为10等份。每一份的大小即1rem的值。该值作为docEl的fontSize大小。在HTML文档中，docEl即html标签。
// 已经经过了scale拉升处理
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
在webpack中，通过配置插件，将css文件中的px转换成rem。
{
loader: 'postcss-loader',
options: {
plugins: [
postcssAutoprefixer({
browsers: autoprefix
}),
px2rem({
remUnit: 75
}),
],
sourceMap: false,
},
},
remUnit设置为75，10rem是750px。即iPhone6物理像素。和设计稿一致。
设计稿中常出现出现1px的边框等，代码中这样写会被转换成0.013333rem。
不考虑/* px */ 和 /* no */的情况，前者在dpr为3的手机上被转换成1.5px，四舍五入是2。和2px表现一致（大多数情况）。后者恒定的1px，也不够灵活。
iPhone手机
以iPhone6(375 * 667)为例，devicePixelRadio的值为2，initial-scale为0.5，页面放大两倍，html宽度变为750px。通过flexible处理后，1rem是75px，那么0.013333rem恰好是1px，与设计稿一致。
// 注意代码执行顺序很重要。先进行缩放，然后才是获取html的宽度。
// var width = docEl.getBoundingClientRect().width;
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下，对于2和3的屏，用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;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
以iPhone 6/7/8 Plus（414 * 736）为例，devicePixelRadio的值是3，1rem的值是414 * 3 / 10 = 124.2px。那么0.013333rem的值是1.65左右，四舍五入是2。和2px表现一致（大多数情况）。由于Plus系列更宽，所以Plus上的2px和非Plus上的1px视觉上差距不大，可以接受。
安卓手机
flexible的源码中，对安卓机直接设置dpr为1。也就是device-width。以我的一加6为例，device-width是412。所以1rem就是41.2px。css中写1px会被转换为0.013333 * 41.2得到的值是0.55px，四舍五入是1。在我的手机上还可以看得见，
安卓手机上，这样可能会造成一个问题，当0.013333 * device-width / 10 < 0.5的时候，可能会在手机上看不到了（只是可能看不到）。当device-width的值小于375的时候，css中1px像素可能会看不到。
我在vivo Y85中遇到过这个问题。
解决1px不可见问题
所以对flexible进行了改动，不再进行区分iOS和安卓。代码如下。
if (!dpr && !scale) {
var devicePixelRatio = win.devicePixelRatio;
dpr = devicePixelRatio;
scale = 1 / dpr;
var dataDpr;
if(devicePixelRatio >= 2.5 && (!dpr || dpr >= 2.5)) {
dataDpr = 3;
} else if (devicePixelRatio >= 1.5 && (!dpr || dpr >= 1.5)) {
dataDpr = 2;
} else {
dataDpr = 1;
}
docEl.setAttribute('data-dpr', dataDpr);
}
if (!doc.querySelector('meta[name="viewport"]')) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
// 顺便说一句，flexible这里是没有width=device-width配置的，改动后加上了。不加上可能会出现页面变形问题。
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
scale仍然根据设备devicePixelRatio进行缩放，让html的宽度等于设备的物理像素。比如我的一加6，device-width是412，devicePixelRadio的值是2.625，document.documentElement.getBoundingClientRect().width的值是1081，几乎就是412 * 2.625的值。据我测试过多台安卓机器，这两个值偏差都在1以内。所以1rem的值就是108.1，css中1px转换的结果是0.013333 * 108.1 = 1.44，视觉上和1px一致。
理论上，如果让1px像素不可见，需要符合以下条件：
0.013333 * device-width * devicePixelRadio / 10 < 0.5
需要device-width * devicePixelRadio < 375，由于现在设备devicePixelRadio几乎都大于2，想要找到符合该条件的几乎不存在。这只是理论上不可见的充分必要条件，实际中还是根据机型而定。但是不管如何，这种写法比之前的写法更为稳妥。
html上设置data-dpr属性，该属性是将devicePixelRatio四舍五入得到的。对一些元素设置背景图像（或其他行为）时，根据该属性不同设置不同像素的背景图。
// scss的mixin语法
@mixin bg($url1,$url2){
[data-dpr="1"] & {
background: url($url1) no-repeat top center/750px 670px, #ff776e;
}
[data-dpr="2"] & {
background: url($url1) no-repeat top center/750px 670px, #ff776e;
}
[data-dpr="3"] & {
background: url($url2) no-repeat top center/1125px 1005px, #ff776e;
}
}
