vue 开发 H5 如何做适配

如何创建基础的vue项目, 我这边就不和大家说啦, 今天主要是和大家分享一下, vue 开发 H5 端, 如何做适配.

• 1. 在 index.html 文件中加入以下代码:
     
• 2.先创建两个全局的样式文件 boder.css 和 reset.css 分别在 main.js 中引入
  • 添加boder.css,设置1像素边框,防止移动端CSS里面写了1px，实际上看起来比1px粗的问题出现.

      /*移动端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
     * 因，边框是由伪元素区域遮盖在父级
     * 故，子级若有交互，需要对子级设置
     * 定位 及 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) {
      /* 默认值，无需重置 */
    }
     
    @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,清除不同手机浏览器的初始样式,使各种浏览器的初始样式都保持一致.

              /*! 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.移动端项目主要是根据屏幕大小来动态设置元素的尺寸，需要安装下面两个插件：
  * postcss-pxtorem 用于将 px 转化为 rem npm install postcss [email protected] --save-dev
  * lib-flexible用于设置 rem 基准值 npm i lib-flexible , 并在 main.js 中引入 import 'lib-flexible'
  • 在package.json项目配置里设置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 中引入

        /**
         * 移动端(手机端)页面自适应解决方案—rem布局
         * @ 转化为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单位就好了。如果你的设计稿宽度为750px，那么写样式的时候就要把数字除以2.

Tip 这边提一个注意事项, 如果是使用的 VantUi 组件, 还需要再加一个配置文件

• 设置 postcss 根目录下的新建 postcss.config.js 文件（如果有这个文件则无需添加）

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

• 以上是我在做H5的时候, 参考别人的方法, 做的整理, 如有问题, 欢迎指出!!!