rem 移动端栅格化适配

最新推荐文章于 2025-03-04 11:57:41 发布

weixin_33721344

最新推荐文章于 2025-03-04 11:57:41 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fe-huahai/p/5617956.html

本文介绍了REM单位的概念及应用场景，详细解析了如何利用REM实现响应式布局，并通过实例展示了移动端栅格系统的构建方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.移动端栅格化

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

<html>
     <head>
         <style>
             html{
                /* 屏幕宽度320px */
                 font-size:64px;
                /* 屏幕宽度240px */
                 font-size:48px;
             }
              div{
                 width:3rem;
                 height:2rem;
                 background-color:#be4aa0;
              }
         </style>
     </head>
     <body>
          <div>
          </div>
     </body>
</html>

如上所示，假设把横向的栅格数固定为5，使用javascript根据屏幕的宽度计算html元素的font-size的值，若屏幕宽度为240px，fonz-size的值为240px % 5 = 48px,即一个栅格的高度和宽度为48px(1rem = 48px)。若屏幕宽度为320px，同理计算知栅格的宽度和高度为64px(1rem = 64px)。div的宽度设为3rem,相当于占3个栅格，高度设为2rem，相当于占2个栅格。

总之，把屏幕划分为一个一个栅格，并且宽度方向上的栅格数在不同屏幕上相同，每个元素的宽度和高度所占的栅格数固定，达到类似放大或缩小的效果。

3.应用

只基于一个尺寸大小的设计稿写网页，如375px * 667px，其他的不同大小的屏幕在执行时，按照原设计放大或缩小。

转载于:https://www.cnblogs.com/fe-huahai/p/5617956.html