vue專案移動端 pc端適配方案（px轉rem）

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

npm i lib-flexible - snpm i postcss-px2rem -

s

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

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

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

import

'lib-flexible'

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

因為lib-flexible主要用於手機自適應，當螢幕尺寸大於540px時，它設定html的font-size固定為54px，並不能根據螢幕尺寸調整標籤的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;
}

postcss-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、對於行內樣式，阿里手淘並不能將px轉rem，所以對於需要自適應的樣式，如font-size、width、height等請不要寫在行內。同理，對於不需要轉化的樣式可以寫在行內，或者使用px（大寫）作為單位。

2、字型大小不使用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)
}

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

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

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