vue項目移動端、pc端適配方案
vue項目移動端、pc端適配方案
- lib-flexible 根據屏幕寬度，自動設置html的font-size
- postcss-px2rem 自動將px單位轉換成rem
一、第一步先安裝 flexible和 postcss-px2rem（命令行安裝）
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值。
二、引入lib-flexible
在項目入口文件main.js 中引入lib-flexible
import 'lib-flexible'注意事項（important）: 由於flexible會動態給頁面header中添加標簽，所以務必請把目錄 public/index.html 中的這個標簽刪除！！！
三、修改lib-flexible源碼
因為lib-flexible主要用於手機自適應，當屏幕尺寸大於540px時，它設置html的font-size固定為54px，並不能根據屏幕尺寸調整html的font-size的大小，所以這里需要修改lib-flexible源碼。
在node-modules依賴包lib-flexible文件夾中的flexible.js文件，可以看到源碼
function refreshRem(){
//獲取屏幕寬度
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
//這里當屏幕寬度大於540時，寬度寫死為540了，所以要想電腦端也能通過rem自適應,替換成 width = width * dpr;
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}修改替換成 width = width * dpr
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
//變更
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}四、配置postcss-px2rem
px2rem的配置放在vue-cli3 項目中vue.config.js中（找不到？可能你是一個新構建的項目，需要手動在項目根目錄創建vue.config.js）
具體配置內容如下：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
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 那么我們必須在寫樣式時，也將值改為設計圖的一半。
五、注意事項
1、字號不使用rem
我們都知道chrome的最小顯示的字體是12px，如果字體用rem，計算出來小於12px，那么就也會以12px顯示，而且我們不希望出現13px或者15px這樣的奇葩尺寸，所以字體最好是用px來表示，至於適應，我們可以寫媒體查詢。
.item {
border-bottom: 1px #8d8d8d dashed;
font-size: 12px;
line-height: 16px;
@media screen and (min-width: 576px) {
font-size: 14px;
line-height: 18px;
}
@media screen and (min-width: 768px) {
font-size: 16px;
line-height: 28px;
}
@media screen and (min-width: 992px) {
font-size: 16px;
line-height: 32px;
}
@media screen and (min-width: 1200px) {
font-size: 18px;
line-height: 64px;
}
}2、簡單來講阿里手淘的原理就是網頁隨着屏幕大小等比例縮放而已，所以此方案只適用於純手機端或者pc端的適配方案，當然手機端、pc端也可以同時適配，前提是頁面布局不變。一般而言，手機端、pc端共用一個項目還是建議使用柵格布局、媒體查詢控制。