Home Diary Blog Photo Community Open Source
rem
rem是css3中用来设置字体大小的单位,相比于px、pt、em这些单位,rem非常适合用来做移动端的响应式适配。
为什么有了em还要使用rem?rem与em最大的区别就是rem是根据网页的根元素即html字体大小来设置字体大小,
而em是根据父元素的字体大小来设置的。

使用rem的一个简单的代码实例:

html{font-size:62.5%;}

body{font-size:1.6rem;}

p{font-size:2.4rem;}

上面的css代码在根元素html中定义字体为基本字体的62.5%(10/16*100%=62.5%),设计为1rem=10px主要是方便计算。

这样body中的字体大小1.6rem就是相当于16px,p标签中设置2.4rem就是24px。

以上就是rem使用时的简单例子,还是很方便的。但是如果要做到移动端响应式布局,
根据手机屏幕的大小自动设置根元素的字体,就需要用到下面这段代码了。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
!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);
</script>

这是在网上找的淘宝rem响应式布局代码,把这段代码放在页面头部head中可以做到页面中html的font-size恒为100px,即此时1rem=100px。
这样就可以很方便的换算UI给你的750px宽度原型图中的各元素宽高了。