關(guān)于vue利用postcss-pxtorem進(jìn)行移動(dòng)端適配的問題
剛開始我按照網(wǎng)上的一些方式利用postcss-pxtorem方式去適配的時(shí)候怎么樣都不成功，后來經(jīng)過自己不斷嘗試之后終于成功了。稍微坐下總結(jié)：
1.個(gè)人建議在進(jìn)行postcss-pxtorem適配的時(shí)候利用webpack進(jìn)行項(xiàng)目配置，而不要用webpack-simple，因?yàn)閣ebpack里面很多插件加載器之類的都是給你預(yù)配好的，這樣在項(xiàng)目構(gòu)建中就不會(huì)遺漏什么。
2.cnpm install postcss-pxtorem -D安裝postcss-pxtorem，此插件如果你用的是webpack的話只要進(jìn)行安裝即可，不需要另外進(jìn)行配置，此插件是對px進(jìn)行轉(zhuǎn)換。
3.新建一個(gè)rem.js的文件，輸入以下代碼即可，然后在main.js中引用。
4.在項(xiàng)目的根目錄下找到.postcssrc.js文件在文件內(nèi)添加以下代碼，一般750px的設(shè)計(jì)稿的根元素大小設(shè)置32.
5.重啟項(xiàng)目就ok了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)PDF文件預(yù)覽的方法詳解
pdf文件預(yù)覽是開發(fā)業(yè)務(wù)時(shí)常見的一個(gè)交互,在toB項(xiàng)目中是經(jīng)常用到的,對于用戶上傳文件,預(yù)覽文件等操作時(shí)有一個(gè)更好的體驗(yàn),下面我結(jié)合實(shí)際業(yè)務(wù),在vue的基礎(chǔ)上與大家分享這個(gè)實(shí)現(xiàn)方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫
vue的過渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(shí)現(xiàn)的。接下來通過本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫效果，感興趣的朋友一起看看吧2019-05-05
使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能
在Web應(yīng)用中,倒計(jì)時(shí)功能常用于各種場景,如活動(dòng)倒計(jì)時(shí)、定時(shí)任務(wù)提醒等,Vue.js作為一款輕量級(jí)的前端框架,提供了豐富的工具和API來實(shí)現(xiàn)這些功能,本文將詳細(xì)介紹如何使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能,需要的朋友可以參考下2024-09-09
vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽
這篇文章主要介紹了vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vite build vue3項(xiàng)目配置開啟sourcemap方式
這篇文章主要介紹了vite build vue3項(xiàng)目配置開啟sourcemap方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08