vue專案移動端 pc端適配方案

vue專案移動端、pc端適配方案

npm i lib-flexible -s

npm i postcss-px2rem -s

簡要介紹這兩個包的用途：

flexible會為頁面根據螢幕自動新增標籤，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值。

postcss-px2rem會將px轉換為rem，rem單位用於適配不同寬度的螢幕，根據標籤的font-size值來計算出結果，1rem=html標籤的font-size值。

在專案入口檔案main.js 中引入lib-flexible

import 'lib-flexible'

注意事項（important）: 由於flexible會動態給頁面header中新增標籤，所以務必請把目錄 public/index.html 中的這個標籤刪除！！！

因為lib-flexible主要用於手機自適應，當螢幕尺寸大於540px時，它設定html的font-size固定為54px，並不能根據螢幕尺寸調整html的font-size的大小，所以這裡需要修改lib-flexible原始碼。

在node-modules依賴包lib-flexible資料夾中的flexible.js檔案，可以看到原始碼

function refreshrem()
var rem = width / 10;
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}

修改替換成 width = width * dpr

function refreshrem()
var rem = width / 10;
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}

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

具體配置內容如下：

module.exports = ,
postcss: )]}
}},}

那為什麼你在這裡寫成了37.5呢？？？那我們後面專門來講！

之所以設為37.5，是為了引用像mint-ui這樣的第三方ui框架，因為第三方框架沒有相容px2rem ，將remunit的值設定為設計圖寬度（這裡為750px）75的一半，即可以1:1還原mint-ui的元件，否則會樣式會有變化，例如按鈕會變小。

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

1、字型大小不使用rem

我們都知道chrome的最小顯示的字型是12px，如果字型用rem，計算出來小於12px，那麼就也會以12px顯示，而且我們不希望出現13px或者15px這樣的奇葩尺寸，所以字型最好是用px來表示，至於適應，我們可以寫**查詢。

.item 
@media screen and (min-width: 768px) 
@media screen and (min-width: 992px) 
@media screen and (min-width: 1200px) 
}

2、簡單來講阿里手淘的原理就是網頁隨著螢幕大小等比例縮放而已，所以此方案只適用於純手機端或者pc端的適配方案，當然手機端、pc端也可以同時適配，前提是頁面布局不變。一般而言，手機端、pc端共用乙個專案還是建議使用柵格布局、**查詢控制。

vue中使用rem布局解析+大屏自適應

基於vue cli3的移動端適配問題