0.前言
这个方案是我2015年2月用的方案。
那时vw方案因为兼容性问题而不能适用。
写此文就是为了纪念下。
1.切图的时候按照视觉稿自身分辨率来切
2.加上如下JS代码
(function (doc, win, ideaWidth) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
docEl.style.fontSize = 100 * (clientWidth / ideaWidth) + 'px';
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
// 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function () {
// return;
var dpr = scale = 1;
var devicePixelRatio = win.devicePixelRatio;
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3) {
dpr = 3;
} else if (devicePixelRatio >= 2) {
dpr = 2;
} else {
dpr = 1;
}
scale = 1 / dpr;
// 插入meta标签
var metaEl = "";
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
docEl.firstElementChild.appendChild(metaEl);
})();
})(document, window, 750);
// 这里的750，是因为视觉稿分辨率宽为750。以你的视觉稿分辨率为准
3.为rem设定一个基准值
<style>
html {
font-size: 100px;
}
</style>
此时，0.01rem就相当于1px。
