vue移動端響應式方案設計

筆者在這里推薦兩個插件  

postcss-pxtorem、amfe-flexible

1、postcss-pxtorem 可以實現動態的將px轉為rem單位（px to rem），筆者建議大家拖動窗口大小就可以看見效果哦。

//首先安裝
yarn add postcss-pxtorem --dev

 

使用vue cli3/vue cli4 創建的，在項目根目錄下有個postcss.config.js，打開在里面添加一下一行配置

//配置
plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5,   //這里是px轉為rem的基准值，當字體為設置14px時，在通用手機尺寸上顯示為14px。
      propList: ['*']
    }
  }

2、amfe-flexible 頁面響應式設計

//首先安裝
yarn add amfe-flexible

//main.js中引入
import 'amfe-flexible'

接下來，就可以在頁面上使用px單位了，在手機端可以自動適應。