如何解决移动端适配问题

在有关移动端开发过程中，我们遇到最常见的问题就是如何做好不同屏幕手机的适配。

第一 使用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中引用

4.通过自己的测量工具直接输入你对应的尺寸，例如本人使用蓝湖量出该元素width为600px 我只需要css中写上width: rem(600)就行了

第二 使用尺寸打的图片在移动端中
使用img引用

img{
      display: block;
      height: auto;
      max-width: 100%;
}

注意的是：图片过大，用户在手机点击图片会进入默认进入浏览图片模式，不用担心，我们只需设置一下样式---------如果你对该图片有绑定事件，会导致事件触发失效

img{
  pointer-events: none;
}