移动端适配rem,vw

以下方案 只是摘录网上一些大神的博客, 不依赖,修改灵活方便.

方案一 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 = {}))