vue使用rem實(shí)現(xiàn) 移動端屏幕適配
要想移動端適配 并使用 rem 您需要先看這篇文章，配置好less ?? 在vue 中使用 less，就可以使用rem了
如果項(xiàng)目已經(jīng)開發(fā)的差不多了，沒有用到rem 又要使用rem，您用這招。
postcss-pxtorem：轉(zhuǎn)換px為rem的插件
安裝 postcss-pxtorem
npm install postcss-pxtorem --save
新建rem.js文件
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
// 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設(shè)置頁面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}并引用進(jìn)main.js文件內(nèi)
import './rem'
修改.postcssrc.js 文件
在.postcssrc.js文件內(nèi)的 plugins 添加以下配置，配后就可以在開發(fā)中直接使用 px 單位開發(fā)了
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}helloworld.vue
<template>
<div class="hello">
test
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
.hello {
text-align: center;
font-size: 20px;
width: 300px;
height: 400px;
background:red;
}
</style>效果
補(bǔ)充：下面看下Vue用rem布局
使用vue.js搭建一個(gè)移動端項(xiàng)目，怎樣做到自適應(yīng)呢？當(dāng)然選擇rem布局是比較方便快捷的。
在使用vue-cli搭建好項(xiàng)目框架后，在目錄結(jié)構(gòu)的index.html文件中添加一段代碼：
<script>
fnResize()
window.onresize = function () {
fnResize()
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
}
</script>之后，在寫css時(shí)，只要將px單位替換成rem，這里設(shè)置的比例是100px=1rem,例如，寬度為100px時(shí)，可以直接寫成1rem。
總結(jié)
以上所述是小編給大家介紹的vue使用rem實(shí)現(xiàn) 移動端屏幕適配 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
本文主要介紹了el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
Vue3實(shí)現(xiàn)檢測密碼強(qiáng)度值功能
本文將演示如何使用Vue?3實(shí)現(xiàn)一個(gè)簡單的密碼強(qiáng)度檢測功能,通過實(shí)時(shí)反饋,幫助用戶創(chuàng)建更安全的密碼,從而提升整體系統(tǒng)的安全性,需要的朋友可以參考下2024-06-06
監(jiān)聽element-ui table滾動事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁面分享其他頁面)
這篇文章主要介紹了vue微信分享，在當(dāng)前頁面分享其他頁面，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue深入解析之render function code詳解
vue對大家來說應(yīng)該再熟悉不過了，下面這篇文章主要給大家深入的解析了vue之render function code的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要為大家詳細(xì)介紹一下如何在Vue3中實(shí)現(xiàn)自定義指令，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的同學(xué)可以參考一下2022-07-07
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題
這篇文章主要介紹了解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實(shí)現(xiàn)ToDoList簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08