關於手機適配的方案（transform）

手機按照750px 的設計稿樣式排版。頁面在750px的屏幕上顯示正常

        var doc = document
        var docEle = doc.documentElement
        var width
        function setRootFontSize(){
            width = docEle.getBoundingClientRect().width
            doc.querySelector('#main').style = `transform: scale(${width / 750})`
        }
        setRootFontSize()

在其他尺寸的屏幕上，按照比例進行縮放。

 

 

 

 

遇到的問題： 由於在樣式加載后進行了縮放，所以body的高度沒有改變，仍然是縮放之前的高度，所以在頁面加載之后需要設置重新設置body的高度，方法如下：

        function setHeight() {
            console.log(doc.querySelector('#main').clientHeight)
            doc.body.style.height = (doc.querySelector('#main').clientHeight * width / 750) + 'px'
        }
        if (doc.readyState === "complete") {
            setHeight()
        } else {
            window.onload = setHeight
        }

document.readystatus 在加載中是loading狀態，加載完成之后轉為complate狀態。需要在此時重新設置body的高度、

 

 

 

完整代碼：

<script type="text/javascript">
    void function (){
        var doc = document
        var docEle = doc.documentElement
        var width
        function setRootFontSize(){
            width = docEle.getBoundingClientRect().width
            doc.querySelector('#main').style = `transform: scale(${width / 750})`
        }
        setRootFontSize()

        function setHeight() {
            console.log(doc.querySelector('#main').clientHeight)
            doc.body.style.height = (doc.querySelector('#main').clientHeight * width / 750) + 'px'
        }
        if (doc.readyState === "complete") {
            setHeight()
        } else {
            window.onload = setHeight
        }
    }()
</script>

 

 

二： 使用rem適配

　　　　1:  npm install postcss-pxtorem --save-dev

　　　　　　安裝postcss的依賴　　

　　　　2: 修改配置文件 .postcssrc.js

　　　　　　

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {

  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      rootValue: 16,
      unitPrecision: 5,
      propWhiteList: [],
      selectorBlackList: ['className'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 2
    }
  }
}

這樣樣式以px為單位，輸出的樣式為rem單位