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