h5项目实现屏幕适配

说明：针对于vue实现屏幕适配，可以根据淘宝推出的lib-flexible + px2rem-loader进行弹性布局，开发者可以根据设计图上的px单位直接布局，而在浏览器中可以直接将px转换为rem。
无论是移动端还是pc都可以使用lib-flexible!!!
下面以我实际开发为例（vuecli2）

使用：
1.首先先来安装下lib-flexible

npm i lib-flexible --s

2.在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

3.安装px2rem-loader

在使用flexible插件时 会自动把px转换成rem，在vue的脚手架中安装过lib-flexible之后 ，使用px2rem将px转换成rem。

npm install px2rem-loader

4.配置px2rem-loader

在lib-flexible中找到refreshRem这个方法

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;  //这个好像针对于移动端，但我们可以根据实际情况更改
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

更改为：

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width* dpr;  //更改后
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

修改build/utils.js, 在cssLoader变量中

移动端：

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75      //设计稿根据750*1334，可根据实际调整rem与px之间转换比例
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

pc端:

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 192      //设计稿根据1920px，rem为px的十分之一
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

如果写的原生js的项目，大家可以直接利用script引入flexible.js就可以了

由于flexible自适应可以删除meta标签

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

再分享下自己以前写项目另一种适配的方法：

在src新建js文件夹新建remConfig.js

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {      
    // alert('手机端')       

  var abc = document.documentElement.clientWidth;      
    var bl = abc/640//设计稿的宽度    

  var fontSize = 100*bl       
  document.documentElement.style.fontSize = fontSize + "px"    
}else{      
  //  alert('PC端')
  // 75代表设计图默认值
     var whdef = 75 / 1920; // 表示1920的设计图,使用100PX的默认值        
     var wH = window.innerHeight; // 当前窗口的高度      
     var wW = window.innerWidth; // 当前窗口的宽度      
     var rem        
     if(wW <= 1200) {       
            rem = 1200 * whdef;      
     } else {            
       rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值      
     }        
     $('html').css('font-size', rem + "px");     
     $(window).resize(function() // 绑定到窗口的这个事件中           
     {               
       var whdef = 75 / 1920; // 表示1920的设计图,使用100PX的默认值           
       var wH = window.innerHeight; // 当前窗口的高度              
       var wW = window.innerWidth; // 当前窗口的宽度          
       if(wW <= 1200) {                  
       rem = 1200 * whdef;             
      } else {                  
       rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值   
      }             
      $('html').css('font-size', rem + "px");            
      var H = document.documentElement.scrollHeight;              
   //    $('html').height(H);           
     });    
}

</script>

项目重启后生效，以上我对于h5项目实现屏幕适配的解决方案，希望可以帮到大家