以下方案 只是摘录网上一些大神的博客, 不依赖,修改灵活方便.
方案一 rem
原文地址:https://www.cnblogs.com/leinov/p/5209456.html
meta设置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
适配代码
(function (doc, win) {
console.log("dpr:"+win.devicePixelRatio);
var docEle = doc.documentElement,
isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),
dpr=Math.min(win.devicePixelRatio, 3);
scale = 1 / dpr,
resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEle.dataset.dpr = dpr;
var metaEle = doc.createElement('meta');
metaEle.name = 'viewport';
metaEle.content = 'initial-scale=' + scale + ',maximum-scale=' + scale;
docEle.firstElementChild.appendChild(metaEle);
var recalCulate = function {
var width = docEle.clientWidth;
if (width / dpr > 640) {
width = 640 * dpr;
}
docEle.style.fontSize = 20 * (width / 750) + 'px';
};
recalCulate
if (!doc.addEventListener) return;
win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);
使用
scss
@function px2rem( $px ){
@return $px*750/$designWidth/20 + rem; //这句是不是感觉很熟悉 这句其实跟上面的那段js是对应的
}
$designWidth : 750; //如设计图是750
示例
@import 'px2rem.scss';
$designWidth : 750; //如设计图是750
.banner{width:px2rem(300)}//如设计稿上的banner是300px 就免去计算环节
方案二 vw
//以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
@return ($px / 750) * 100vw;
}
方案三 rem+vw
原文地址:https://blog.noob6.com/2018/06/03/the-simplest-way-to-adapted-to-mobile-in-css-with-vw+rem/
html设置
html{font-size:13.33333333vw}
meta设置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
屏幕太大设置
@media (min-width: 560px) {
html {
font-size: 54px;
}
}
方案四:
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
Element适配代码
!function (e, t) { function i() { var t = n.getBoundingClientRect().width / 10; n.style.fontSize = t + "px", p.rem = e.rem = t } var a, r = e.document, n = r.documentElement, o = r.querySelector('meta[name="viewport"]'), l = r.querySelector('meta[name="flexible"]'), m = r.querySelector('meta[name="flexible-in-x5"]'), s = !0, c = 0, d = 0, p = t.flexible || (t.flexible = {}); if (o) { console.warn("将根据已有的meta标签来设置缩放比例"); var u = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/); u && (d = parseFloat(u[1]), c = parseInt(1 / d)) } else if (l) { var f = l.getAttribute("content"); if (f) { var v = f.match(/initial\-dpr=([\d\.]+)/), h = f.match(/maximum\-dpr=([\d\.]+)/); v && (c = parseFloat(v[1]), d = parseFloat((1 / c).toFixed(2))), h && (c = parseFloat(h[1]), d = parseFloat((1 / c).toFixed(2))) } } if (m && (s = "false" !== m.getAttribute("content")), !c && !d) { var x = (e.navigator.appVersion.match(/android/gi), e.chrome), g = e.navigator.appVersion.match(/iphone/gi), b = e.devicePixelRatio, w = /TBS\/\d+/.test(e.navigator.userAgent), y = !1; try { y = "true" === localStorage.getItem("IN_FLEXIBLE_WHITE_LIST") } catch (e) { y = !1 } d = 1 / (c = g || x || w && s && y ? b >= 3 && (!c || c >= 3) ? 3 : b >= 2 && (!c || c >= 2) ? 2 : 1 : 1) } if (n.setAttribute("data-dpr", c), !o) if ((o = r.createElement("meta")).setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ", user-scalable=no, viewport-fit=cover"), n.firstElementChild) n.firstElementChild.appendChild(o); else { var E = r.createElement("div"); E.appendChild(o), r.write(E.innerHTML) } e.addEventListener("resize", function () { clearTimeout(a), a = setTimeout(i, 300) }, !1), e.addEventListener("pageshow", function (e) { e.persisted && (clearTimeout(a), a = setTimeout(i, 300)) }, !1), "complete" === r.readyState ? r.body.style.fontSize = 12 * c + "px" : r.addEventListener("DOMContentLoaded", function (e) { r.body.style.fontSize = 12 * c + "px" }, !1), i(), p.dpr = e.dpr = c, p.refreshRem = i, p.rem2px = function (e) { var t = parseFloat(e) * this.rem; return "string" == typeof e && e.match(/rem$/) && (t += "px"), t }, p.px2rem = function (e) { var t = parseFloat(e) / this.rem; return "string" == typeof e && e.match(/px$/) && (t += "rem"), t } }(window, window.lib || (window.lib = {}))