vue中的適配px2rem示例代碼
前言
做移動(dòng)端時(shí)，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉(zhuǎn)為了rem。
px2rem 地址：https://www.npmjs.com/package/px2rem
這應(yīng)該是vue項(xiàng)目在適配移動(dòng)端時(shí)候，最簡(jiǎn)單的方法之一
下面是基本步驟（使用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//這個(gè)是重點(diǎn)，設(shè)計(jì)稿是750px
}
}
const loaders = [cssLoader,px2remLoader]
完了就可以直接用px做單位按照750的設(shè)計(jì)稿擼代碼了，
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
日歷在很多地方都可以使用的到，本文主要介紹了vue3日歷控件的具體實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue中table多選/單選行,獲取其數(shù)據(jù)方式
這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vite+element-plus項(xiàng)目基礎(chǔ)搭建的全過程
最近看完Vue3和Vite文檔之后,就寫了個(gè)小demo,整體感覺下來(lái)還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項(xiàng)目基礎(chǔ)搭建的全過程,需要的朋友可以參考下2022-07-07
本文主要介紹了vue-electron中修改表格內(nèi)容并修改樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue+elementui實(shí)現(xiàn)下拉表格多選和搜索功能
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)下拉表格多選和搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11
vue3中的watch是一個(gè)組合式的API使用時(shí)需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
elementUI 動(dòng)態(tài)生成幾行幾列的方法示例
這篇文章主要介紹了elementUI 動(dòng)態(tài)生成幾行幾列的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07