vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法
px2rem-loader 需要與 flexible 配合使用,不然px2rem僅僅只是轉(zhuǎn)成rem卻不會(huì)設(shè)置rem的信息
安裝 flexible
npm i lib-flexible -S
然后在main.js中引入
import 'lib-flexible/flexible'
直接引入的文件需要有優(yōu)先與引用的組件
安裝px2rem-loader
npm i px2rem-loader -D
在build的utils.js中找到cssLoader添加一下代碼
const px2remLoader = { loader: 'px2rem-loader', option: { remUnit: 75 // 設(shè)計(jì)圖寬度÷10 } }
找到generateLoaders
修改一下代碼
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]
具體如下
然后重啟項(xiàng)目
注意
因?yàn)榫W(wǎng)頁識(shí)別的精度有限,如果是1px轉(zhuǎn)成rem之后,會(huì)出現(xiàn)不識(shí)別的狀態(tài),主要是在邊框的時(shí)候;
這時(shí)候可以在css語句后面加上/* no */ 表示此行語句不轉(zhuǎn)換;如
.tabs div{ width: 218px; height: 70px; line-height: 72px; text-align: center; border: 1px solid #dcdcdc;/* no */ }
總結(jié)
以上所述是小編給大家介紹的vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- vue打包后顯示空白正確處理方法
- Vue打包后出現(xiàn)一些map文件的解決方法
- 使用vue打包時(shí)vendor文件過大或者是app.js文件很大的問題
- vue打包使用Nginx代理解決跨域問題
- 解決vue打包項(xiàng)目后刷新404的問題
- 解決vue打包之后靜態(tài)資源圖片失效的問題
- 解決Vue打包之后文件路徑出錯(cuò)的問題
- vue打包之后生成一個(gè)配置文件修改接口的方法
- 解決vue打包c(diǎn)ss文件中背景圖片的路徑問題
- 解決vue打包后vendor.js文件過大問題
- 解決vue打包后刷新頁面報(bào)錯(cuò):Unexpected token <
- 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題
- 詳解Vue打包優(yōu)化之code spliting
- 基于vue打包后字體和圖片資源失效問題的解決方法
- Vue打包后訪問靜態(tài)資源路徑問題
- 解決Vue打包上線之后部分CSS不生效的問題
- vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
- 壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
相關(guān)文章
vue簡單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue簡單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值的相關(guān)資料,需要的朋友可以參考下2019-09-09Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟,有興趣的朋友可以跟著操作下。2018-07-07vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03利用Vue實(shí)現(xiàn)一個(gè)markdown編輯器實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)一個(gè)markdown編輯器的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案
這篇文章主要介紹了vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案,prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue項(xiàng)目的html如何引進(jìn)public里面的js文件
這篇文章主要介紹了vue項(xiàng)目的html如何引進(jìn)public里面的js文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue項(xiàng)目創(chuàng)建首頁發(fā)送axios請(qǐng)求的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目創(chuàng)建首頁發(fā)送axios請(qǐng)求的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02基于vue2.0實(shí)現(xiàn)的級(jí)聯(lián)選擇器
這篇文章主要介紹了基于vue2.0實(shí)現(xiàn)的級(jí)聯(lián)選擇器,基于Vue的級(jí)聯(lián)選擇器,可以單項(xiàng),二級(jí), 三級(jí)級(jí)聯(lián),多級(jí)級(jí)聯(lián),有興趣可以了解一下2017-06-06