问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

小米商城网页移动版屏幕适配方案是什么？

头像
huguangju
    9671612

    小米商城网页移动版 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 大小的？以及它的自适应方案是什么？

    css
    阅读 3.8k
    1 个回答
    得票最新
    头像
    cococe
      27815
      头像
      nodejh
        451113
        ✓ 已被采纳

        我大致看了一下源码，在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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题