移动端动态Rem方案以及1px问题

首先谈一下响应式注意点

1.meta:vp 组织缩放
2.尽量不要写width/height 改用max/min
3.flex布局
4.media query

（移动端）方案思路

1.浏览器禁止980像素的缩放
2.设置html{font-size: 页面宽度/10 px}
3.10 rem==页面宽度
4.所有单位都用rem==所有长度都已页面宽度为基准
5.页面可以兼容任何手机屏幕
ps：但是现在出了新单位vw vh（但是安卓4.4（包括）以上才支持 uc完全不支持~！ sad~）

1px问题

1.在普通屏幕
css 1px ==设备的1px
2.在Retina==设备的2px
border-width==设备的1px
border-width：0.5px==设备的1px（兼容性有问题）
最优方案：页面整体缩放50%(initial-scale=0.5)
border-width：1px==设备的1px

副作用
所有div都变为原来的50%

解决：因为所有长度都以rem为基准
rem变为原来的两倍即可

最终code：

<script>
    var scale = 1 / window.devicePixelRatio // 1\2\3
    document.write(`
      <meta name="viewport"
        content="initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no"> 
      `)
</script>
<script>
    var width = document.documentElement.clientWidth / window.devicePixelRatio
    var css = `
    html{
      font-size: ${width / 10 * window.devicePixelRatio}px;
    }
    `
    document.write(`<style>${css}</style>`)
</script>