1. 屏幕自适应
1.1. 框架
1.2. pc端
1.3. 移动端
1.3.1. ideal viewport 的效果
<meta name="viewport" content="width=device-width, initial-scale=1">
1.3.2. 等比缩放
<script>(function(){var w=window.screen.width,s=w/750,u=navigator.userAgent,m='<meta name="viewport" content="width=750,';if(/android (\d+\.\d+)/i.test(u)){if(parseFloat(RegExp.$1>2.3)){m+="minimum-scale = "+s+", maximum-scale = "+s+","}}else{m+="user-scalable=no,"}m+='target-densitydpi=device-dpi">';document.write(m)}());</script>
不设置viewport,在head里面用js生成,在安卓内流里面会有一些问题
1.3.3. 根据设备设不同的字体
使用自定义字体,font-face,然后js判断机型
1.3.4. rem
用的少,用rem是比较好，但是比较麻烦，如果不根据屏幕尺寸来调节html的font-size，这对rem没啥用,rem一般要配合@media用