vue 移動端適配vant

2021-10-12 09:30:58 字數 2395 閱讀 1547

下面我們分別將這兩個工具配置到專案中完成 rem 適配。

一、使用 lib-flexible 動態設定 rem 基準值（html 標籤的字型大小）

1、安裝

npm i amfe-flexible
2、然後在 main.js 中載入執行該模組

import 'amfe-flexible'
二、使用 postcss-pxtorem 將 px 轉為 rem

1、安裝

npm install postcss-pxtorem -d

2、然後在專案根目錄中建立 .postcssrc.js 檔案

module.exports = 


}}
3、配置完畢，重新啟動服務

最後測試：重新整理瀏覽器頁面，審查元素的樣式檢視是否已將 px 轉換為 rem。

需要注意的是：

postcss 是乙個處理 css 的處理工具，本身功能比較單一，它主要負責解析 css **，再交由外掛程式來進行處理，它的外掛程式體系非常強大，所能進行的操作是多種多樣的，例如：

目前 postcss 已經有 200 多個功能各異的外掛程式。開發人員也可以根據專案的需要，開發出自己的 postcss 外掛程式。

postcss 一般不單獨使用，而是與已有的構建工具進行整合。

vue cli 預設整合了 postcss，並且預設開啟了 autoprefixer 外掛程式。

vue cli 內部使用了 postcss。

你可以通過 .postcssrc 或任何 postcss-load-config 支援的配置源來配置 postcss。也可以通過 vue.config.js 中的 css.loaderoptions.postcss 配置 postcss-loader。

我們預設開啟了 autoprefixer。如果要配置目標瀏覽器，可使用 package.json 的 browserslist 字段。

（2）autoprefixer 外掛程式的配置

autoprefixer 是乙個自動新增瀏覽器字首的 postcss 外掛程式，browsers 用來配置相容的瀏覽器版本資訊，但是寫在這裡的話會引起編譯器警告。

replace autoprefixer browsers option to browserslist config.


use browserslist key in package.json or .browserslistrc file.


using browsers option can cause errors. browserslist config


can be used for babel, autoprefixer, postcss-normalize and other tools.


if you really need to use option, rename it to overridebrowserslist.


learn more at:
警告意思就是說你應該將 browsers 選項寫到 package.json 或 .browserlistrc 檔案中。

[android]


>= 4.0


[ios]


>= 8
（3）postcss-pxtorem 外掛程式的配置

rootvalue 應該如何設定呢？

如果你使用的是基於 lib-flexable 的 rem 適配方案，則應該設定為你的設計稿的十分之一。


例如設計稿是 750 寬，則應該設定為 75。
大多數設計稿的原型都是以 iphone6 為原型，iphone6 裝置的寬是 750，我們的設計稿也是這樣。

但是 vant 建議設定為 37.5，為什麼呢？

因為 vant 是基於 375 寫的，所以如果你設定為 75 的話，vant 的樣式就小了一半。
所以如果設定為 37.5 的話，vant 的樣式是沒有問題的，但是我們在測量設計稿的時候都必須除2才能使用，否則就會變得很大。

這樣做其實也沒有問題，但是有沒有更好的辦法呢？我就想實現測量多少寫多少（不用換算）。於是聰明的你就想，可以不可以這樣來做？

通過查閱文件我們可以看到 rootvalue 支援兩種引數型別：

所以我們修改配置如下：

/**


* postcss 配置檔案


*/module.exports = ,


// 配置使用 postcss-pxtorem 外掛程式


// 作用：把 px 轉為 rem


'postcss-pxtorem': ) ,


proplist: ['*']


}}}
配置完畢，把服務重啟一下，最後測試

移動端Vant元件庫REM適配

在頁面布局之前,對rem進行配置,以適配移動端特點。官方參考 vant文件 快速上手 高階用法 rem適配 postcss pxtorem 是一款 postcss 外掛程式，用於將px單位轉化為 rem。使用步驟 安裝 npm i d postcss pxtorem 配置 postcss.confi...

Vue移動端框架選型之 Vant

前端時間幫友人做了個外賣小應用，經歷了痛苦的ui框架選型，最終從最初選定的museui轉投有贊vant，以下是個人總結 vant提供了sku 省市選擇器等極具實用價值的業務元件，這點必須點個大寫的贊，其他框架鮮有把元件封裝到業務級別的 vant提供了一些看似冷門 其他框架較少提供 但是實際很常用的元...

Vue移動端螢幕適配

第一步 在src路徑下新建乙個js資料夾，在建立乙個resize.js檔案 第二部 在resize.js檔案內寫入以下 function doc,win if doc.addeventlistener return domcontentloaded是firefox下特有的event,當所有dom解析...