vue中web手机端的适配问题

vue中web手机端的适配问题

在使用vue进行web手机端适配时可以使用rem做单位进行适配。rem为相对单位，是相对HTML根元素的字体大小为基准计算大小。如设置html:{font-size:16px}，那么p{font-size: 1rem}的字体大小就为16px。
所以使用rem进行适配的大体思路就为：根据屏幕的大小调整html元素的字体大小。

//这里使用的vue
created() {
//获取html
      var html = document.getElementsByTagName("html")[0];
      if(window.innerWidth < 768){
      //首次进入时获取屏幕宽度，宽度/750*100，手机端设计稿宽一般为750px，这里以750为基准调整基础大小，即当屏幕正好为750px时html字体大小为100px，p{font-size: 1rem}字体大小就为100px，屏幕宽为375px时，html50px、p50px，这里标签的宽高同样能使用rem表示
        html.style.fontSize = window.innerWidth/750*100 + "px";
       }else{
         html.style.fontSize = "16px"
       }
       //实时获取改变html根元素字体大小
       window.addEventListener('resize', function() {
         if(window.innerWidth < 768){
           html.style.fontSize = window.innerWidth/750*100 + "px";
           // console.log(window.innerWidth/750*100 + "px");
         }else{
           html.style.fontSize = "16px"
         }
       })
   }

可能出现的问题：

1、
使用rem时，可能出现图片，span等标签位置错乱的问题。具体原因也不是很清楚，解决方法：在#app的样式层添加基准字体大小，如：

@media screen and (max-width: 767px){
      #app{
        font-size: 0rem;//其他大小也可能出现错乱情况，这里直接改为0rem
      }
  }

2、
部分浏览器存有最小字体大小限制，如谷歌最小字体为12px，在使用该浏览器做参考，如设计稿字体为20px，一倍屏应为10px，浏览器只会显示最小标准的12px，导致参考样式有偏差。