本文作者:DurkBlue

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

DurkBlue 2020-01-04 2092
小米手机端关于商城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>


此篇文章由DurkBlue发布,麻烦转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2020-01-04
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(1)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享