最近新開了一個專案使用 vue做一h5專案 ，我就拿vue3 來練練手，
其實做h5首先避不開適配的問題，其實我首先想到的就是 rem 適配
也想到了 Viewport 布局 但是求穩 還是選擇了 rem 適配 可能人吧 總是害怕去接受新的事物吧！
但是就開始下手寫的時候，想起來了之前的layui 事件，讓我毅然決然 還是選擇了 viewport 布局， 畢竟這個現在瀏覽器支持都很好 了，是時候 更新換代了，一直活在過去的技術也不行，
本來選擇vue2的我，也是換到了vue3
使用viewport的話 推薦一個 插件，postcss-px-to-viewport
一個將我們寫的px轉換成 viewport單位的插件，
1， 快速上手
npm i postcss-px-to-viewport --save
or
yarn add postcss-px-to-viewport -D
2.然后在創建一個 postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
"postcss-px-to-viewport": {
viewportWidth: 375, // 設計稿 375
exclude: /\/node_modules/, // 排除 node_modules 檔案下的樣式轉換
unitPrecision: 2 // 換算之后 保留兩位小數
},
},
};
3. 實際使用中查看
<template>
<div class="home">
<div class="test"></div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "Home",
};
</script>
<style lang="scss" scoped>
.home {
display: flex;
justify-content: space-between;
.test {
color: #ff0;
font-size: 16px;
height: 100px;
width: 100px;
background: #f00;
}
}
</style>
確實幫我們做了轉換，這樣效果也是很好，其實也有很多rem解決方案的
之前我也去看過一個 lib-flexible 這個比較出名的 rem適配方式
但是作者的一句話也是讓我感受頗深
也讓我想起來了一句話，
人可以往回看，但不要往回走
關注我，持續更新 前端知識
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/333824.html
標籤：其他