首先談一下響應(yīng)式注意點

1.meta:vp 組織縮放
2.盡量不要寫width/height 改用max/min
3.flex布局
4.media query

（移動端）方案思路

1.瀏覽器禁止980像素的縮放
2.設(shè)置html{font-size: 頁面寬度/10 px}
3.10 rem==頁面寬度
4.所有單位都用rem==所有長度都已頁面寬度為基準
5.頁面可以兼容任何手機屏幕
ps：但是現(xiàn)在出了新單位vw vh（但是安卓4.4（包括）以上才支持 uc完全不支持~！ sad~）

1px問題

1.在普通屏幕
css 1px ==設(shè)備的1px
2.在Retina==設(shè)備的2px
border-width==設(shè)備的1px
border-width：0.5px==設(shè)備的1px（兼容性有問題）
最優(yōu)方案：頁面整體縮放50%(initial-scale=0.5)
border-width：1px==設(shè)備的1px

副作用
所有div都變?yōu)樵瓉淼?0%

解決：因為所有長度都以rem為基準
rem變?yōu)樵瓉淼膬杀都纯?/p>

最終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>