整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
想在移動端適配并使用rem，您需要先配置好less，在Vue中使用less，就可以使用rem了；
如果項目已經開發的差不多了沒用用到rem又要使用rem，這一招就夠了；
postcss-pxtorm:轉換px為rem的插件；
npm install postcss-pxtorem --save
const baseSize = 32
// 設置 rem 函數
function setRem () {
// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設置頁面根節點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
setRem()
}
注：如果在pc端使用把750改成1920就可以使用；這個數字是ui設計圖的寬度；
import './rem'
在.postcssrc.js文件內的 plugins中添加一下配置。陪之后就可以在開發中直接使用px單位直接開發；
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
<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>
注：如果您有更好發方法可以留言或發私信，相互學習討論
著移動設備的普及，響應式網站已經成為了現代網頁設計的標配。響應式網站可以自動適應不同設備的屏幕大小，提供更好的用戶體驗。如果你想學習如何制作響應式網站，下面是一些簡單的步驟和技巧，幫助你開始這個過程。
一、計劃和設計
在制作響應式網站之前，你需要先進行計劃和設計。你可以先確定你的網站主要的布局和功能，然后細化到不同設備的屏幕大小。考慮到不同設備的視覺和交互需求，你可以使用流式布局、媒體查詢、彈性圖片和自適應字體等技術來實現響應式設計。
二、使用流式布局
流式布局是指網頁的布局隨著屏幕大小的變化而自動調整。你可以使用百分比單位來設置元素的寬度和間距，而不是固定像素值。這樣，當屏幕的大小改變時，元素的大小和布局也會自動適應。
三、使用媒體查詢
媒體查詢是一種CSS3的功能，可以根據設備的特性來應用不同的樣式。你可以使用媒體查詢來設置不同屏幕大小下的元素樣式，如字體大小、圖片大小、列數等。通過媒體查詢，你可以為不同設備提供最佳的顯示效果。
四、彈性圖片
在響應式網站中，圖片也需要自適應屏幕大小。你可以使用CSS3的max-width屬性來限制圖片的最大寬度，使其在小屏幕上不會溢出。同時，你也可以使用srcset屬性來為不同屏幕大小提供不同分辨率的圖片，以提高加載速度和顯示質量。
五、自適應字體
字體大小在不同屏幕大小下也需要自適應。你可以使用CSS3的rem單位來設置字體大小，它相對于根元素的字體大小。通過設置根元素的字體大小和使用rem單位，你可以讓字體在不同屏幕大小下按比例自動調整。
六、測試和優化
制作響應式網站后，你需要在不同設備和瀏覽器上進行測試，以確保它能夠在各種情況下正常顯示和操作。你可以使用瀏覽器的開發者工具來模擬不同設備的屏幕大小和觸摸操作。同時，你也可以利用一些在線工具和服務來測試網站的響應式性能和兼容性。
七、使用示例
者：D_R_M
鏈接：https://www.jianshu.com/p/691a569f7fe1
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
