基於vue-cli的vue項目移動端樣式適配，lib-flexible和postcss-px2rem

時間 2019-11-09

標籤基於 vue cli 項目移動樣式適配 lib flexible postcss px2rem rem 欄目無線简体版

原文原文鏈接

安裝 flexible和 postcss-px2rem（命令行安裝）css

npm install lib-flexible --save

npm install postcss-px2rem --save

lexible會爲頁面根據屏幕自動添加<meta name='viewport' >標籤，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值。html

在Galaxy S III手機上vue

在iphone6/7/8vue-cli

postcss-px2rem會將px轉換爲rem，rem單位用於適配不一樣寬度的屏幕，根據<html>標籤的font-size值來計算出結果，1rem=html標籤的font-size值。npm

引入lib-flexible

在項目入口文件main.js 中引入lib-flexible框架

注意事項（important）: 因爲flexible會動態給頁面header中添加<meta name='viewport' >標籤，因此務必請把目錄 public/index.html 中的這個標籤刪除！！！iphone

import 'lib-flexible'

配置postcss-px2remide

vue-cli3 構建的項目相較於vue-cli2 構建的項目精簡了許多，將一些默認配置進行了更好更嚴密，讓開發變得更高效的封裝。具體請看vue-cli官網 https://cli.vuejs.org/zh/guide/post

px2rem的配置放在vue-cli3 項目中vue.config.js中（找不到？可能你是一個新構建的項目，須要手動在項目根目錄建立vue.config.js）flex

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}

OK，重啓項目，兩個用於移動端適配的包就這樣能夠愉快的開始使用了！！！下面來看咱們的代碼，代碼中咱們直接用px來寫寬高：

.testclass {
    width: 300px;
    height: 200px;
    background: #e3e3e3;
}

在vue-cli2中編輯項目根目錄下.postcss.js文件（沒有則新建一個）

module.exports = {
  "plugins": {
        require('postcss-px2rem')({
            remUnit: 37.5
        })
    }
 }

舒適提示： remUnit這個配置項的數值是多少呢？？？一般咱們是根據設計圖來定這個值，緣由很簡單，便於開發。假如設計圖給的寬度是750，咱們一般就會把remUnit設置爲75，這樣咱們寫樣式時，能夠直接按照設計圖標註的寬高來1:1還原開發。

那爲何你在這裏寫成了37.5呢？？？那咱們後面專門來說！

之因此設爲37.5，是爲了引用像mint-ui這樣的第三方UI框架，由於第三方框架沒有兼容px2rem ，將remUnit的值設置爲設計圖寬度（這裏爲750px）75的一半，便可以1:1還原mint-ui的組件，不然會樣式會有變化，例如按鈕會變小。

既然設置成了37.5 那麼咱們必須在寫樣式時，也將值改成設計圖的一半。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。