web前端rem适配

最新推荐文章于 2024-03-13 14:35:41 发布

转载最新推荐文章于 2024-03-13 14:35:41 发布 · 1.5k 阅读

文章标签：

#rem #web前端

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了移动端使用REM单位进行布局的三种主流适配方案：媒体查询、通过JavaScript改变根节点大小及设置meta的缩放比例，并提供了具体实现案例。

rem是前端的一个长度单位，前端的单位有px(像素)，em(相对于父元素)，rem(相对于根节点)，px一般应用与PC端，而移动端则多采用rem来达到更好的效果。

针对rem 主要有一下3中主流的适配方案：

1.媒体查询(不推荐)

// 计算rem的基准字体
$rem-base-font-size: 100px;

// UI设计图的分辨率宽度
$UI-resolution-width: 1440px;

@mixin html-font-size() {
    @media (min-width:320px){
      html{
        font-size: 320px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:360px){
      html{
        font-size: 360px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:375px){
      html{
        font-size: 375px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:412px){
      html{
        font-size: 412px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:480px){
      html{
        font-size: 480px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:640px){
      html{
        font-size: 640px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:720px){
      html{
        font-size: 720px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:768px){
      html{
        font-size: 768px / $UI-resolution-width * $rem-base-font-size;
      }
    }
    @media (min-width:1440px){
      html{
        font-size: 1440px / $UI-resolution-width * $rem-base-font-size;
      }
    }
}

2.通过javaScript改变根节点大小

(function (doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if(clientWidth>=640){
				docEl.style.fontSize = '100px';
			}else{
				docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
			}
		};

	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

3.通过设置meta的缩放比例

! function (e) {
    function t(a) {
        if (i[a]) return i[a].exports;
        var n = i[a] = {
            exports: {},
            id: a,
            loaded: !1
        };
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
}([function (e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
        value: !0
    });
    var i = window;
    t["default"] = i.flex = function (normal, e, t) {
        var a = e || 100,
            n = t || 1,
            r = i.document,
            o = navigator.userAgent,
            d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
            l = o.match(/U3\/((\d+|\.){5,})/i),
            c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
            p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
            s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = normal ? 1 : 1 / s,
            m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute(
            "content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u +
            ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px"
    }, e.exports = t["default"]
}]);
flex(false, 100, 1);

参考文章：https://www.cnblogs.com/gymmer/p/6883063.html
https://www.jianshu.com/p/b00cd3506782
https://www.jianshu.com/p/985d26b40199