简单说说rem布局

相对单位布局

em: 相对于字体  根：body
rem： r —— root 根：html

添加：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

解释：

viewport：视口  窗口

width：320px 标准  高清屏dpi device-width

initial-scale 初始化缩放比例： 1 不缩放

user-scalable： 页面是否缩放

maximum-scale=1 用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

换算公式

标准:
  标准字体大小   32         新的字体大小 ？
--------------------- = -----------------
  标准的设备宽度 320        新的设备宽度 clientWidth

新的字体大小 = 标准字体大小/标准的设备宽度*新的设备宽度
document.documentElement.style.fontSize = 32/320*document.docuemntElement.clientWidth +  "px";

常用设计稿宽度640px / 750px  / 1150px

版心：320px

标准字体大小：20px  / 32px / 64px

font-size: 最小值12px