rem实现页面自适应屏幕分辨率

本文转载自查看原文 2020-04-08 08:06 1091

<html>
    <body>
        <div class="test"></div>
    </body>
</html>

默认情况下1rem=16px; font-size: 62.5%, 1rem=10px; 以下按照屏幕分辨率设置font-size的百分率，可以保证div的宽高比在不同分辨率下保持一致，页面字体大小使用rem同理

/*根据屏幕分辨率自适应大小*/
@media (max-width:1921px){
    html{
        font-size: 62.5% !important;/*1rem=10px*/
    }
}
@media (max-width:1601px){
    html{
        font-size: 52.08333333% !important;
    }
}
@media (max-width:1367px){
    html{
        font-size: 44.46614583% !important;
    }
}
@media (max-width:1281px){
    html{
        font-size: 41.66666666% !important;/**/
    }
}
.test｛
　　width:20%;
　　height:5rem;
｝

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 WinForm 根据屏幕分辨率自适应窗体自适应屏幕分辨率 pc端，自适应屏幕分辨率 Unity3d屏幕分辨率自适应问题前端多端、多分辨率适配之rem自适应实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应 Unity 3D手游对不同分辨率屏幕的UI自适应 android 图片大小适配，如何在不同屏幕上适配图片，如何设置可以自适应不同分辨率？字体大小自适应屏幕分辨率 CSS解决方案利用 Javascript 让 DIV 自适应屏幕的分辨率，从而决定是否显示滚动条