首先谈一下响应式注意点
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>
