Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端
vue-cli2版本配置
1.下載lib-flexible
我使用的是vue-cli+webpack，所以是通過npm來安裝的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.設(shè)置meta標(biāo)簽
通過meta標(biāo)簽，設(shè)置設(shè)備寬度以及縮放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安裝px2rem-loader
npm install px2rem-loader --save-dev
5.配置px2rem-loader
這里是重要的一步~~
在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}同時(shí)，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}6.重啟，一切ok~
當(dāng)配置完之后，只需要重啟下服務(wù)，就自動(dòng)轉(zhuǎn)化為rem了
npm run dev
二. Vue-cli3 中的用法
關(guān)于移動(dòng)端的適配，我喜歡用px2rem配合lib-flexible，非常方便，vue-cli3.0后，項(xiàng)目配置被大大精簡了，這使得原來配置px2rem的文件不復(fù)存在，但其實(shí)只要掌握了正確的姿勢，配置方法比原來更簡單~
1、lib-flexible
作用：讓網(wǎng)頁根據(jù)設(shè)備dpr和寬度，利用viewport和html根元素的font-size配合rem來適配不同尺寸的移動(dòng)端設(shè)備
npm i lib-flexible --save
引入：
入口文件main.js中：
import 'lib-flexible/flexible.js'
2、pxtorem
作用：將項(xiàng)目中css的px轉(zhuǎn)成rem單位，免去計(jì)算煩惱
npm i postcss-px2rem --save
配置：vue.config.js（如果沒有，手動(dòng)創(chuàng)建一個(gè)）內(nèi)，在postcss內(nèi)添加：
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 37.5
})]
}
}
}
}TIPS
1、pxtorem中，對于想忽略的px寫成大寫即可，諸如 border:1PX solid #fff;
2、也可以選擇postcss-px2rem，我更喜歡pxtorem的忽略方式，方便我vscode的beautify自動(dòng)格式化代碼
到此這篇關(guān)于Vue-cli 將px轉(zhuǎn)化為rem適配移動(dòng)端的文章就介紹到這了,更多相關(guān)Vue-cli 將px轉(zhuǎn)化為rem內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
響應(yīng)式就是當(dāng)對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時(shí),將會運(yùn)行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue動(dòng)態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)
這篇文章主要介紹了Vue動(dòng)態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue項(xiàng)目如何配置public靜態(tài)資源路徑訪問
這篇文章主要介紹了vue項(xiàng)目如何配置public靜態(tài)資源路徑訪問方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下2023-10-10
springboot?vue測試平臺前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測試平臺前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
在開發(fā)過程中,啟動(dòng)項(xiàng)目是必不可少的一步,本文介紹了兩種啟動(dòng)項(xiàng)目的方法,第一種方法是通過命令提示符(cmd)進(jìn)入項(xiàng)目目錄,然后輸入npm run serve來啟動(dòng)項(xiàng)目,第二種方法是直接在項(xiàng)目目錄下打開命令提示符(cmd),輸入npm run serve即可啟動(dòng)項(xiàng)目2024-10-10
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的,這篇文章主要給大家介紹了關(guān)于Vue組件之間的通信方式,需要的朋友可以參考下2022-06-06