栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

移动端rem适配问题

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

移动端rem适配问题

tip:除了需要媒体查询宽度,必要的时候也需要查询一下高度,如有定位并且需要移动端全屏,建议使用高100vh和定位top百分比的形式(不过有背景图可能会拉伸)

@media screen and (min-width:320px) {
    html {
        font-size: 282%;
    }
}
@media screen and (min-width:350px) {
    html {
        font-size: 342%;
    }
}
@media screen and (min-width:360px) {
    html {
        font-size: 351.56%;
    }
}
@media screen and (min-width:375px) {
    html {
        font-size: 366.2%;
    }
}
@media screen and (min-width:384px) {
    html {
        font-size: 375%;
    }
}
@media screen and (min-width:390px) {
    html {
        font-size: 380.85%;
    }
}
@media screen and (min-width:393px) {
    
    html {
        font-size: 383.79%;
    }
}
@media screen and (min-width:410px) {
    html {
        font-size: 400%;
    }
}
@media screen and (min-width:432px) {
    
    html {
        font-size: 421.875%;
    }
}
@media screen and (min-width:480px) {
    html {
        font-size: 469%;
    }
}
@media screen and (min-width:540px) {
    html {
        font-size: 527.34%;
    }
}
@media screen and (min-width:640px) {
    html {
        font-size: 625%;
    }
}
@media screen and (min-width:720px) {
    html {
        font-size: 703.125%;
    }
}

@media screen and (min-width:768px) {
    html {
        font-size: 600.125%;
    }
}

@media screen and (min-width:1024px) {
    html {
        font-size: 703.125%;
    }
}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242287.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号