4移动适配之rem

最新推荐文章于 2022-05-16 21:56:34 发布

qq_47670443

最新推荐文章于 2022-05-16 21:56:34 发布

阅读量166

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_47670443/article/details/124413535

版权

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

1首先要区分em和rem的不同

em：em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置即参照父容器的字号大小或浏览器默认字号大小。

rem: rem是css3的新标准也是一种相对长度单位，其相对于HTML根标签的字号大小。

    <style>
        html {
            font-size: 30px;
        }


        .one{
            width:2rem;
            height:2rem;
            background-color: pink;
        }

        .two {
            margin-top:100px;
            font-size:10px;
            width: 2em;
            height: 2em;
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="one">
        测试文字1
    </div>

    <div class="two">
        测试文字2
    </div>


</body>

</html>

如图所示：测试文字1是使用rem作为单位，而定义的跟标签字号大小是30px，所以较大。

测试文字2使用em作为单位，自身设置了字体大小10培训，所以较小。

如果我们改变代码：去除.two中的字号大小，测试文字2 就会继承html中的字号大小

em和rem的区别一句话概括：em相对于父元素或其自身，rem相对于根元素。

我们设置了rem的相对大小，然后使用rem作为长度单位来布局。

那么如何设置这个基准值呢？

第一种方法：通过媒体查询

 <style>
        @media(width:375px){
            html{
                font-size:37.5px;
            }
            }

        @media(width:414px){
            html{
                font-size:41.4px;
            }
        }

        .box{
            width:10rem;
            height:10rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
</body>
</html>

缺点：有几个设备就要查询几次

方法2：引入flexible js设置基准值

媒体查询设置基准值，需要有对应的宽度才能进行设置，手机屏幕分辨率经常更新，不可能每个都适应到，一般项目中会使用flexible
在项目中直接引入即可 <script src="./js/flexible.js"></script>

一般默认等分为10等分，

可以在以下代码中更改。

function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

根据设计图在less文件中定义字根号大小@rootsize: 37.5rem;

使用rem,其实跟使用px长度单位是一样的，就是每次要除以rootsize进行转换。

 .item{
   background-color: #fff;
   .pic{
     position:relative;
     .status{
       position:absolute;
       top:(-4/@rootsize);
       left:(15/@rootsize);
       width:(68/@rootsize);
       height:(29/@rootsize);
       text-align: center;
       line-height: (29/@rootsize);
       background-color: pink;
       background:url(../images/status_active.png) no-repeat;
      //  background-size: 100%;
       background-size: cover;
       font-size:(12/@rootsize);
       color:#fff;
     }