vue中的適配px2rem示例代碼
更新時(shí)間：2018年11月19日 16:30:25 作者：monkeykg
這篇文章主要給大家介紹了關(guān)于vue中適配px2rem的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
做移動端時(shí)，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉(zhuǎn)為了rem。
px2rem 地址：https://www.npmjs.com/package/px2rem
這應(yīng)該是vue項(xiàng)目在適配移動端時(shí)候，最簡單的方法之一
下面是基本步驟（使用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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)
這篇文章主要介紹了vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了elementui彈窗頁按鈕重復(fù)提交問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要介紹了vue3的setup的使用和原理解析,通過本文我們學(xué)習(xí)了?setup?函數(shù)執(zhí)行的過程及?Vue?是如何處理捕獲?setup?的返回結(jié)果的，需要的朋友可以參考下2022-09-09
vue?router如何實(shí)現(xiàn)tab切換
這篇文章主要介紹了vue?router如何實(shí)現(xiàn)tab切換，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開發(fā)畫流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說為什么是難點(diǎn)，首先，它是依賴畫布canvas知識開發(fā)，這篇文章主要介紹了vue + gojs 實(shí)現(xiàn)拖拽流程圖,需要的朋友可以參考下2023-03-03
vue實(shí)現(xiàn)滾動鼠標(biāo)滾輪切換頁面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動鼠標(biāo)滾輪切換頁面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
對于中小型企業(yè),vue應(yīng)用越來越多,學(xué)習(xí)vue相對于react的成本要低點(diǎn),入門相對簡單。這篇文章主要給大家介紹了關(guān)于Vue接口封裝的相關(guān)資料,需要的朋友可以參考下2021-05-05
基于Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬動畫效果
這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬的動畫效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-05-05
在 Vue 中,插槽（Slot）是一種非常強(qiáng)大且靈活的機(jī)制,用于在組件中插入內(nèi)容,默認(rèn)插槽是在父組件中傳遞內(nèi)容給子組件時(shí)使用的一種方式,這篇文章主要介紹了Vue中的默認(rèn)插槽詳解,需要的朋友可以參考下2024-01-01
基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm的詳細(xì)過程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個(gè)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥磉@個(gè)項(xiàng)目可能會加入更多的工具包，需要的朋友可以參考下2022-10-10