小米手机商城rem适配代码解析_网站建设_资讯

小米手机商城rem适配代码解析

这一个陈年文章，分析的页是小米几年前的网站适配手机的源码，时过几年，这套方法仍然有沿用，下面跨屏平台带领大家剖析一下小米手机商城rem适配代码。

一、小米源码

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);

看到这段代码就联想到了淘宝开发的flexiable.js方法非常的相似，不过小米按照720px的宽度去设置字体比例。

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

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

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

二、简单js代码设置

document.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>

写在最后，以上就是对于“小米手机商城rem适配代码解析”的一些看法，欢迎指正、交流。