vue項(xiàng)目中使用lib-flexible解決移動(dòng)端適配的問(wèn)題解決
第一部分：項(xiàng)目中引入lib-flexible
一、項(xiàng)目中安裝lib-flexible
$ npm install lib-flexible --save
二、在項(xiàng)目的入口js文件中引入lib-flexible
import 'lib-flexible'
通過(guò)要以上兩步，就完成了在vue項(xiàng)目使用lib-flexible來(lái)解決移動(dòng)端適配了。
lib-flexible會(huì)自動(dòng)在html的head中添加一個(gè)meta name="viewport"的標(biāo)簽，同時(shí)會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點(diǎn)的font-size。假如設(shè)計(jì)稿的寬度是750px，此時(shí)1rem應(yīng)該等于75px。假如量的某個(gè)元素的寬度是150px，那么在css里面定義這個(gè)元素的寬度就是 width: 2rem
注意：
1.檢查一下html文件的head中，如果有 meta name="viewport"標(biāo)簽，需要將他注釋掉，因?yàn)槿绻羞@個(gè)標(biāo)簽的話，lib-flexible就會(huì)默認(rèn)使用這個(gè)標(biāo)簽。而我們要使用lib-flexible自己生成的 meta name="viewport"來(lái)達(dá)到高清適配的效果。
2.因?yàn)閔tml的font-size是根據(jù)屏幕寬度除以10計(jì)算出來(lái)的，所以我們需要設(shè)置頁(yè)面的最大寬度是10rem。
3.如果每次從設(shè)計(jì)稿量出來(lái)的尺寸都手動(dòng)去計(jì)算一下rem，就會(huì)導(dǎo)致我們效率比較慢，還有可能會(huì)計(jì)算錯(cuò)誤，所以我們可以使用px2rem-loader自動(dòng)將css中的px轉(zhuǎn)成rem
第二部分：使用px2rem-loader自動(dòng)將css中的px轉(zhuǎn)換成rem
一、安裝px2rem-loader
$ npm install px2rem-loader --save-dev
二、配置px2rem-loader
1.打開(kāi)build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代碼
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75
}
}
2.修改generateLoaders方法中的loaders
// 注釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改為
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
然后重新npm run dev，打開(kāi)控制臺(tái)可以看到代碼中的px已經(jīng)被轉(zhuǎn)成了rem
注意：
1.此方法只能將.vue文件style標(biāo)簽中的px轉(zhuǎn)成rem，不能將script標(biāo)簽和元素style里面定義的px轉(zhuǎn)成rem
2.如果在.vue文件style中的某一行代碼不希望被轉(zhuǎn)成rem，只要在后面寫(xiě)上注釋 /* no*/就可以了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)三級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)
這篇文章主要介紹了使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
聊聊vue集成sweetalert2提示組件的問(wèn)題
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問(wèn)題，本文通過(guò)項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開(kāi)發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫(xiě)法，對(duì)vue?react組件暴露方法相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了深入解讀VUE中的異步渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue.js設(shè)計(jì)與實(shí)現(xiàn)無(wú)限遞歸學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)無(wú)限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面
這篇文章主要介紹了vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09