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 根據屏幕分辨率自適應窗體自適應屏幕分辨率 cocos 自適應屏幕分辨率 NGUI自適應屏幕分辨率 pc端，自適應屏幕分辨率 Unity3d屏幕分辨率自適應問題如何讓Android字體自適應屏幕分辨率 QT界面自適應屏幕分辨率 Vmware CentOS 7自適應屏幕分辨率 delphi 窗體自適應屏幕分辨率