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