如何創(chuàng)建基礎(chǔ)的vue項(xiàng)目, 我這邊就不和大家說啦, 今天主要是和大家分享一下, vue 開發(fā) H5 端, 如何做適配.

• 1. 在 index.html 文件中加入以下代碼:
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
• 2.先創(chuàng)建兩個(gè)全局的樣式文件 boder.css 和 reset.css 分別在 main.js 中引入
  • 添加boder.css,設(shè)置1像素邊框,防止移動(dòng)端CSS里面寫了1px躯护，實(shí)際上看起來(lái)比1px粗的問題出現(xiàn).

      /*移動(dòng)端1像素邊框*/
    @charset "utf-8";
    .border,
    .border-top,
    .border-right,
    .border-bottom,
    .border-left,
    .border-topbottom,
    .border-rightleft,
    .border-topleft,
    .border-rightbottom,
    .border-topright,
    .border-bottomleft {
      position: relative;
    }
     
    .border::before,
    .border-top::before,
    .border-right::before,
    .border-bottom::before,
    .border-left::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::before,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-topright::after,
    .border-bottomleft::before,
    .border-bottomleft::after {
      content: "\0020";
      overflow: hidden;
      position: absolute;
    }
     
    /* border
     * 因滤钱，邊框是由偽元素區(qū)域遮蓋在父級(jí)
     * 故外臂，子級(jí)若有交互三娩，需要對(duì)子級(jí)設(shè)置
     * 定位 及 z軸
     */
    .border::before {
      box-sizing: border-box;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border: 1px solid #eaeaea;
      transform-origin: 0 0;
    }
     
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
      left: 0;
      width: 100%;
      height: 1px;
    }
     
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
      top: 0;
      width: 1px;
      height: 100%;
    }
     
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
      border-top: 1px solid #eaeaea;
      transform-origin: 0 0;
    }
     
    .border-right::before,
    .border-rightbottom::before,
    .border-rightleft::before,
    .border-topright::after {
      border-right: 1px solid #eaeaea;
      transform-origin: 100% 0;
    }
     
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::before {
      border-bottom: 1px solid #eaeaea;
      transform-origin: 0 100%;
    }
     
    .border-left::before,
    .border-topleft::after,
    .border-rightleft::after,
    .border-bottomleft::after {
      border-left: 1px solid #eaeaea;
      transform-origin: 0 0;
    }
     
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
      top: 0;
    }
     
    .border-right::before,
    .border-rightleft::after,
    .border-rightbottom::before,
    .border-topright::after {
      right: 0;
    }
     
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::after {
      bottom: 0;
    }
     
    .border-left::before,
    .border-rightleft::before,
    .border-topleft::after,
    .border-bottomleft::before {
      left: 0;
    }
     
    @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
      /* 默認(rèn)值丑慎，無(wú)需重置 */
    }
     
    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
      .border::before {
        width: 200%;
        height: 200%;
        transform: scale(.5);
      }
     
      .border-top::before,
      .border-bottom::before,
      .border-topbottom::before,
      .border-topbottom::after,
      .border-topleft::before,
      .border-rightbottom::after,
      .border-topright::before,
      .border-bottomleft::before {
        transform: scaleY(.5);
      }
     
      .border-right::before,
      .border-left::before,
      .border-rightleft::before,
      .border-rightleft::after,
      .border-topleft::after,
      .border-rightbottom::before,
      .border-topright::after,
      .border-bottomleft::after {
        transform: scaleX(.5);
      }
    }
     
    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
      .border::before {
        width: 300%;
        height: 300%;
        transform: scale(.33333);
      }
     
      .border-top::before,
      .border-bottom::before,
      .border-topbottom::before,
      .border-topbottom::after,
      .border-topleft::before,
      .border-rightbottom::after,
      .border-topright::before,
      .border-bottomleft::before {
        transform: scaleY(.33333);
      }
     
      .border-right::before,
      .border-left::before,
      .border-rightleft::before,
      .border-rightleft::after,
      .border-topleft::after,
      .border-rightbottom::before,
      .border-topright::after,
      .border-bottomleft::after {
        transform: scaleX(.33333);
      }
    }
    

  • 添加reset.css,清除不同手機(jī)瀏覽器的初始樣式,使各種瀏覽器的初始樣式都保持一致.

              /*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
        html,
        body,
        p,
        ol,
        ul,
        li,
        dl,
        dt,
        dd,
        blockquote,
        figure,
        fieldset,
        legend,
        textarea,
        pre,
        iframe,
        hr,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 0;
          padding: 0;
        }
         
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-size: 100%;
          font-weight: normal;
        }
         
        ul {
          list-style: none;
        }
         
        button,
        input,
        select,
        textarea {
          margin: 0;
        }
         
        html {
          box-sizing: border-box;
        }
         
        * {
          box-sizing: inherit;
        }
        *:before, *:after {
          box-sizing: inherit;
        }
         
        img,
        embed,
        object,
        audio,
        video {
          height: auto;
          max-width: 100%;
        }
         
        iframe {
          border: 0;
        }
         
        table {
          border-collapse: collapse;
          border-spacing: 0;
        }
         
        td,
        th {
          padding: 0;
          text-align: left;
        }
    

• 3.移動(dòng)端項(xiàng)目主要是根據(jù)屏幕大小來(lái)動(dòng)態(tài)設(shè)置元素的尺寸酗昼，需要安裝下面兩個(gè)插件：
  * postcss-pxtorem 用于將 px 轉(zhuǎn)化為 rem npm install postcss postcss-pxtorem@5.0 --save-dev
  * lib-flexible用于設(shè)置 rem 基準(zhǔn)值 npm i lib-flexible , 并在 main.js 中引入 import 'lib-flexible'
  • 在package.json項(xiàng)目配置里設(shè)置postcss

    "postcss": {
      "plugins": {
        "autoprefixer": {
          "overrideBrowserslist": [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
          ]
        },
        "postcss-pxtorem": {
          "rootValue": 37.5,
          "propList": [
            "*"
          ]
        }
      }
    }
    

  • 4.新建 rem.js 文件, 并在 main.js 中引入

        /**
         * 移動(dòng)端(手機(jī)端)頁(yè)面自適應(yīng)解決方案—rem布局
         * @ 轉(zhuǎn)化為px : rem = 37.5 : 1
         */
         (function flexible (window, document) {
          var docEl = document.documentElement
          var dpr = window.devicePixelRatio || 1
    
          // adjust body font size
          function setBodyFontSize () {
            if (document.body) {
              document.body.style.fontSize = 14 * dpr + 'px'
            } else {
              document.addEventListener('DOMContentLoaded', setBodyFontSize)
            }
          }
    
          setBodyFontSize()
    
          // set 1rem = viewWidth / 10
          function setRemUnit () {
            var rem = docEl.clientWidth / 10
            docEl.style.fontSize = rem + 'px'
          }
    
          setRemUnit()
    
          // reset rem unit on page resize
          window.addEventListener('resize', setRemUnit)
          window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
              setRemUnit()
            }
          })
    
          // detect 0.5px supports
          if (dpr >= 2) {
            var fakeBody = document.createElement('body')
            var testElement = document.createElement('div')
            testElement.style.border = '.5px solid transparent'
            fakeBody.appendChild(testElement)
            docEl.appendChild(fakeBody)
            if (testElement.offsetHeight === 1) {
              docEl.classList.add('hairlines')
            }
            docEl.removeChild(fakeBody)
          }
        })(window, document)
    

• 最后杀捻，樣式中直接用px單位就好了崔泵。如果你的設(shè)計(jì)稿寬度為750px，那么寫樣式的時(shí)候就要把數(shù)字除以2.

Tip 這邊提一個(gè)注意事項(xiàng), 如果是使用的 VantUi 組件, 還需要再加一個(gè)配置文件

• 設(shè)置 postcss 根目錄下的新建 postcss.config.js 文件（如果有這個(gè)文件則無(wú)需添加）

    module.exports = {
         plugins: {
           // postcss-pxtorem 插件的版本需要 >= 5.0.0
          'postcss-pxtorem': {
             rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
              },
              propList: ['*'],
          } ,
        },
      };
  

• 以上是我在做H5的時(shí)候, 參考別人的方法, 做的整理, 如有問題, 歡迎指出!!!