相对单位布局
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