rem 移动端栅格化适配

Posted 2020-07-30 spring

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem 移动端栅格化适配相关的知识，希望对你有一定的参考价值。

1.rem

rem (font size of the root element)是指相对于根元素<html>字体大小的单位。

<html>
    <head>
         <style type="text/css">
              html{
                  font-size: 20px;
              }
            div{
                  width: 100rem;
                  height: 60rem;
            }
         </style>
     </head>
    <body>
        <!--div宽度为：100 ＊ 20px =200px;高度为60 * 20px = 120px-->
         <div></div>
    </body>
</html>

2.移动端栅格化

（1）把不同大小的移动端屏幕的宽度划分为相同个数的片段，这个片段的长度就是栅格的高度和宽度。假设横向的栅格数为16：若屏幕的宽度为320px，则每个栅格的宽度和高度为20px；若屏幕的宽度为240px，则每个栅格的的宽度和高度为15px。不同屏幕横向的栅格数相同，格子的大小随屏幕的大小而改变，一个元素的宽度与高度占有固定个数的格子。

以上是关于rem 移动端栅格化适配的主要内容，如果未能解决你的问题，请参考以下文章

rem 移动端栅格化 适配

rem 移动端栅格化适配