css - 小米商城网页移动版屏幕适配方案是什么？
本文介绍了css - 小米商城网页移动版屏幕适配方案是什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
小米商城网页移动版 https://m.mi.com/#/index（chrome手机模式下查看），会随着设备尺寸变化而动态改变 html 标签上 style 的 font-size 大小:
<html lang="zh-CN" style="font-size: 52.0833px;"></html>
这是在 iphone6 下的 font-size 大小
然后的它body设置如下：
body {
font-size: .2rem;
}
所以 body 的 font-size 实际可以换算为 10.41666px（52.0833 * 0.2）？感觉有点怪
我大概知道这是基于 rem 作屏幕适配的，但不知道它是基于何种规则控制根元素 font-size 大小的？以及它的自适应方案是什么？
解决方案
我大致看了一下源码，在body标签下，第二script标签就是用来动态改变根元素font-size大小的
!function(n){
var e=n.document, //获取document
t=e.documentElement, //获取根节点html
i=720, //初始值720px
d=i/100, //假设100px为1rem，那么720px为7.2rem
o="orientationchange"in n?"orientationchange":"resize", //判断是否有改变横屏事件，没有的话用resize事件
a=function(){
var n=t.clientWidth||320; //获取手机屏幕宽度
n > 720 && (n=720), //手机屏幕宽度大于720px默认设置为720px，即最大宽度为720px
t.style.fontSize=n/d+"px" //设置根元素的字体大小为手机屏幕宽度/7.2,为上面自己定义的，当然你可以定义成别的，8.2，9.4都行
};
e.addEventListener && (n.addEventListener(o,a,!1), //判断是否有addeventlistener方法，如果有，就绑定上面判断的o事件
e.addEventListener("DOMContentLoaded",a,!1)) //绑定DOMContentLoaded事件
}(window);假如你的设计图是720px宽，可以转化成7.2rem，比如设计图里有个button为120px宽，转化成rem就是1.2rem
这篇关于css - 小米商城网页移动版屏幕适配方案是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
