rem 移動端柵格化適配

時間 2019-11-30

標籤 rem 移動柵格適配欄目無線简体版

原文原文鏈接

1.remjavascript

rem (font size of the root element)是指相對於根元素<html>字體大小的單位。css

<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.移動端柵格化html

把不一樣大小的移動端屏幕的寬度劃分爲相同個數的片斷，這個片斷的長度就是柵格的高度和寬度。假設橫向的柵格數爲16：若屏幕的寬度爲320px，則每一個柵格的寬度和高度爲20px；若屏幕的寬度爲240px，則每一個柵格的的寬度和高度爲15px。不一樣屏幕橫向的柵格數相同，格子的大小隨屏幕的大小而改變，一個元素的寬度與高度佔有固定個數的格子。java

<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個柵格。字體

總之，把屏幕劃分爲一個一個柵格，而且寬度方向上的柵格數在不一樣屏幕上相同，每一個元素的寬度和高度所佔的柵格數固定，達到相似放大或縮小的效果。spa

3.應用設計

只基於一個尺寸大小的設計稿寫網頁，如375px * 667px，其餘的不一樣大小的屏幕在執行時，按照原設計放大或縮小。code