小米手机端关于商城rem适配原理

摘要： 一、小米源码function(n) {    var e = n.document, &n...

一、小米源码

function(n) {    var e = n.document,    t = e.documentElement,    i = 720,    d = i / 100,    o = "orientationchange" in n ? "orientationchange": "resize",    a = function() {        var n = t.clientWidth || 320;        n > 720 && (n = 720),        t.style.fontSize = n / d + "px"    };    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))} (window);

小米按照720px的宽度去设置字体比例。

d = i / 100, //比例，通过这个比例去计算字体大小。

t.style.fontSize = t.clientWidth / d + "px"   //通过实时获取的屏幕宽度除以比例 就是字体新的字体大小。意思就是客户端的宽度除以比例就是当前字体的大小，比如：720/（720/100）=100px, 100px为html上的字体大小。

rem 的设置是根据网站根元素去相对改变字体大小的，所以屏幕的宽度改变字体大小也跟着改变，其他div也是一样。

二、简单js代码设置

jsdocument.documentElement.style.fontSize = document.documentElement.clientWidth/6.4+"px";

三、meta缩放适配屏幕宽度

除了用rem适配之外，还有另一种更简单的宽度适配方式，通过meta标签去对屏幕缩放。

<script type="text/javascript">var phoneWidth =  parseInt(window.screen.width);//获取屏幕的宽度var phoneScale = phoneWidth/750; //按750px算去比例var ua = navigator.userAgent;   //根据各种系统机型去适配缩放，就可以保证在不容设备上看的效果都是一样的了。if (/Android (d+.d+)/.test(ua)){    var version = parseFloat(RegExp.$1);      if(version>2.3){        document.write('<meta name="viewport" content="width=750, minimum-scale = '+phoneScale+',maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');      }else{         document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');          }}else{    document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');}</script>