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，其他的不同大小的屏幕在执行时，按照原设计放大或缩小。