vue移動端適配插件lib-flexible

使用vue-cli安裝好一個vue的項目

  1. npm install -g vue-cli
  2. vue init webpack my-project
  3. cd my-project
  4. npm run dev

配置vue插件 lib-flexible

  1. 安裝插件 lib-flexible
    npm i lib-flexible --save-dev
    1. 在main.js中引入lib-flexible
    import 'lib-flexible/flexible' 
    1. 安裝px2rem loader
    npm install px2rem-loader --save-dev
    1. 配置px2rem-loader
      在build文件中找到util.js,將px2rem-loader添加到cssLoaders中,如:
    const cssLoader = {
        loader: 'css-loader',
        options: {
          minimize: process.env.NODE_ENV === 'production',
          sourceMap: options.sourceMap
        }
      }
      const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 75
        }
      }

     

    同時,在generateLoaders方法中添加px2remLoadercss

    function generateLoaders (loader, loaderOptions) {
        const loaders = [cssLoader,px2remLoader]
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }

     

    5.在vue的項目的根目錄中打開 /src/HelloWorld.vue 文件,把template裏面的東西全乾掉,寫上如下這些代碼:vue

    <template>
      <div class="hello">
        適配移動端
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .hello {
      width: 200px;
      height: 200px;
      font-size: 36px;
      margin: 0 auto;
      box-sizing: border-box;
      border: 1px solid green;
    }
    </style>

    在這裏,咱們設置了一個div的寬度是200px,接下來咱們來查看div在不一樣分辨率手機下顯示的狀況
    iPhone6(屏幕寬度爲375px)java

    iPhone6px(屏幕寬度爲414px)webpack

    iPhone5web

     

     

    注意:vue-cli

    1.此方法只能將.vue文件style標籤中的px轉成rem,不能將script標籤和元素style裏面定義的px轉成remnpm

    2.若是在.vue文件style中的某一行代碼不但願被轉成rem,只要在後面寫上註釋 /* no*/就能夠了flex

    結論

    1.使用了vue的lib-flexible後,給div設置了一個寬度,它會跟手機分辨率大小自動調節ui

    2.當設置手機屏幕大小爲375時,它的寬度是100px,說明設計稿是按照750px來設計的,375恰好是一半this

相關文章
相關標籤/搜索