vue中的適配px2rem示例代碼

這篇文章主要給大家介紹了關於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的設計稿擼代碼了，

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對神馬文庫的支持。