vue中的適配px2rem示例代碼

前言

做移動端時，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉為了rem。

px2rem 地址：https://www.npmjs.com/package/px2rem

這應該是vue項目在適配移動端時候，最簡單的方法之一

下面是基本步驟（使用cnpm）

1.下載并引入lib-flexible

cnpm install --save lib-flexible

在main.js中 ：import 'lib-flexible/flexible'

2.引入px2rem-loader

cnpm install --save px2rem-loader

3.將px2rem-loader添加到cssLoaders

在build/util.js中

添加如下配置

代碼如下

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75//這個是重點，設計稿是750px
}
}

const loaders = [cssLoader,px2remLoader]

完了就可以直接用px做單位按照750的設計稿擼代碼了，

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com