在有关移动端开发过程中，我们遇到最常见的问题就是如何做好不同屏幕手机的适配。
第一 使用rem对样式进行尺寸的设置
在做移动端适配的时候，我们将不能再向pc端一样使用px的尺寸，本人刚接触移动端项目时，使用的是px，导致不管如何修改，总是在某个不同的移动端出现样式错乱的问题，每次都不能通过产品的验收。大大的影响了自己的开发效率。
知道我发现了rem这个神奇的存在，这不是简单的对标签样式直接进行什么1rem,2rem等等这种直接设置：
1.我们新建一个rem.js文件
我们将下面这段代码copy进去
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在项目中引用
import '~/utils/rem.js'
注意本人是放在
rem.png
夹下，这个看个人喜好放置
3.我们在自己的style中引用
<style lang="scss" scoped>
@function rem($px) {
$remSize: $px/40;
@return #{$remSize}rem;
}
div{
width: rem(660);
height: rem(580);
}
</style>
4.通过自己的测量工具直接输入你对应的尺寸，例如本人使用蓝湖量出该元素width为600px 我只需要css中写上width: rem(600)就行了
第二 使用尺寸打的图片在移动端中
使用img引用
img{
display: block;
height: auto;
max-width: 100%;
}
注意的是：图片过大，用户在手机点击图片会进入默认进入浏览图片模式，不用担心，我们只需设置一下样式---------如果你对该图片有绑定事件，会导致事件触发失效
img{
pointer-events: none;
}
