在有關(guān)移動端開發(fā)過程中菇绵，我們遇到最常見的問題就是如何做好不同屏幕手機(jī)的適配趁耗。
第一 使用rem對樣式進(jìn)行尺寸的設(shè)置
在做移動端適配的時(shí)候，我們將不能再向pc端一樣使用px的尺寸玛荞，本人剛接觸移動端項(xiàng)目時(shí)秉沼，使用的是px，導(dǎo)致不管如何修改辕狰，總是在某個(gè)不同的移動端出現(xiàn)樣式錯亂的問題改备，每次都不能通過產(chǎn)品的驗(yàn)收。大大的影響了自己的開發(fā)效率蔓倍。
知道我發(fā)現(xiàn)了rem這個(gè)神奇的存在悬钳，這不是簡單的對標(biāo)簽樣式直接進(jìn)行什么1rem,2rem等等這種直接設(shè)置：
1.我們新建一個(gè)rem.js文件
我們將下面這段代碼copy進(jìn)去
let baseSize = 0
let timer = null
const setBaseSize = function () {
baseSize = (document.documentElement.clientWidth / 750) * 40
baseSize = baseSize > 40 ? 40 : baseSize
document.documentElement.style.fontSize = baseSize + 'px'
}
window.addEventListener('resize', function () {
timer && clearTimeout(timer)
timer = setTimeout(setBaseSize, 300)
}, false)
setBaseSize()
2.我在講剛才新建的文件rem.js在項(xiàng)目中引用
import '~/utils/rem.js'
注意本人是放在
rem.png
夾下盐捷，這個(gè)看個(gè)人喜好放置
3.我們在自己的style中引用
<style lang="scss" scoped>
@function rem($px) {
$remSize: $px/40;
@return #{$remSize}rem;
}
div{
width: rem(660);
height: rem(580);
}
</style>
4.通過自己的測量工具直接輸入你對應(yīng)的尺寸，例如本人使用藍(lán)湖量出該元素width為600px 我只需要css中寫上width: rem(600)就行了
第二 使用尺寸打的圖片在移動端中
使用img引用
img{
display: block;
height: auto;
max-width: 100%;
}
注意的是：圖片過大默勾，用戶在手機(jī)點(diǎn)擊圖片會進(jìn)入默認(rèn)進(jìn)入瀏覽圖片模式碉渡，不用擔(dān)心，我們只需設(shè)置一下樣式---------如果你對該圖片有綁定事件母剥，會導(dǎo)致事件觸發(fā)失效
img{
pointer-events: none;
}
