码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-08 09:48:09      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:默认   rem   max   size   height   自适应   自适应屏幕   设置   font   

<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实现页面自适应屏幕分辨率

标签:默认   rem   max   size   height   自适应   自适应屏幕   设置   font   

原文地址:https://www.cnblogs.com/wangshuaicxy/p/12657675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!