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

Posted wangshuaicxy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem实现页面自适应屏幕分辨率相关的知识，希望对你有一定的参考价值。

<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;
｝

 

以上是关于rem实现页面自适应屏幕分辨率的主要内容，如果未能解决你的问题，请参考以下文章

css样式自适应分辨率

rem 单位实现页面自适应布局

pc如何自适应布局 pc端如何根据设计稿做自适应

大屏：页面在不同比例屏幕的显示适配与字体随屏幕改变而改变（字体随屏幕分辨率改变自适应的问题）

移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率

px-rem自适应转换(转)