vue如何使用rem適配
更新時(shí)間：2021年02月06日 16:56:32 作者：灰太狼的情與殤
這篇文章主要介紹了vue如何使用rem適配，幫助大家處理vue開發(fā)移動(dòng)應(yīng)用時(shí)的兼容性問題，感興趣的朋友可以了解下
1.開發(fā)環(huán)境 vue
2.電腦系統(tǒng) windows10專業(yè)版
3.在使用vue開發(fā)移動(dòng)端的過程中,我們會(huì)因?yàn)榧嫒菪远^疼,下面我來分享分享下面vue使用rem自適配,希望對(duì)你有所幫助。
4.廢話不多說,直接上操作:
//安裝 postcss-pxtorem npm i postcss-pxtorem -S
5.在src目錄新建rem文件夾,下面新建rem.js,添加如下代碼:
//基準(zhǔn)大小
const baseSize = 37.5
// 設(shè)置 rem 函數(shù)
function setRem() {
const salepro = document.documentElement.clientWidth / 750
// 當(dāng)前頁面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改.
// 設(shè)置頁面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}
6.在項(xiàng)目根目錄新建 .postcssrc.js,添加代碼如下:
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
注意:我在配置中,比例是1:1,也就是設(shè)計(jì)圖寬是750px,你在css中直接寫width:750px;就可以啦,不用進(jìn)行換算,是不是很棒。
7.在main.js中引入
import '@/rem/rem.js'
8.在vue模板中使用,css中添加如下代碼:
<style lang="scss" scoped>
.about {
width: 750px;
height: 100vh;
box-sizing: border-box;
background-color: blue !important;
.kk {
width: 350px;
height: 350px;
background-color: red;
}
}
</style>
9.效果圖如下:
10.本期的分享到了這里就結(jié)束啦,希望對(duì)你有所幫助,讓我們一起努力走向巔峰。
以上就是vue如何使用rem適配的詳細(xì)內(nèi)容，更多關(guān)于vue使用rem適配的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了前端vue打包項(xiàng)目，如何解決跨域問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
基于Vue CSR的微前端實(shí)現(xiàn)方案實(shí)踐
這篇文章主要介紹了基于Vue CSR的微前端實(shí)現(xiàn)方案實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于VUE中watch的詳細(xì)使用教程,watch是vue實(shí)例的一個(gè)屬性,主要用來監(jiān)聽數(shù)據(jù)的變化,并做出一些操作,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)筆記之自定義組件的相關(guān)資料,組件系統(tǒng)是Vue.js其中一個(gè)重要的概念,它提供了一種抽象,讓我們可以使用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目(搭建過程問題小結(jié))
這篇文章主要介紹了從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目,本項(xiàng)目已vite開始，所以按照vite官方的命令開始，對(duì)vite+vue3+ts項(xiàng)目搭建過程感興趣的朋友一起看看吧2022-05-05
Vue?Router?返回后記住滾動(dòng)條位置的實(shí)現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點(diǎn)擊列表項(xiàng)進(jìn)入詳情頁,在詳情頁點(diǎn)擊返回首頁后,希望看到的是,首頁不刷新,并且滾動(dòng)條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動(dòng)條位置的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-09-09