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

時間 2019-11-11

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

原文原文鏈接

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

npm install lib-flexible --save

npm install postcss-px2rem --save

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

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

例如在Galaxy S III:html

例如在iphone6/7/8:vue

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

2, 引入lib-flexible

在項目入口文件main.js 中引入lib-flexiblenpm

import 'lib-flexible'

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

3, 配置postcss-px2rem

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

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

具體配置內容以下：ide

 1 module.exports = {
 2     css: {
 3         loaderOptions: {
 4           css: {},
 5           postcss: {
 6             plugins: [
 7               require('postcss-px2rem')({
 8                 remUnit: 37.5
 9               })
10             ]
11           }
12         }
13     },
14 }

OK，重啓項目，兩個用於移動端適配的包就這樣能夠愉快的開始使用了！！！post

下面來看咱們的代碼，代碼中咱們直接用px來寫寬高：

1 .testclass {
2   width: 300px;
3   height: 200px;
4   background: #e3e3e3;
5 }

在瀏覽器中會是什麼樣的呢？

沒錯，已經從px轉換成了rem。 what？若是你的沒有從px變成rem, 那麼你可能須要重啓一下項目呦~

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

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

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

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

相關標籤/搜索

每日一句

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