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，其他的不同大小的屏幕在執行時，按照原設計放大或縮小。