vue中移动端rem flexible.js px2rem 通过viewport来适配

1第一种使用px2rem插件

1. 创建：

在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码；

(function() {

  function a() {

    var b = document.documentElement.clientWidth

    b = b > 750 ? 750 : b

    var c = (b / 750) * 100

    document.getElementsByTagName('html')[0].style.fontSize = c + 'px'

  }

  a()

  window.onresize = a

})()

2. 引入：

在src\main.js中导入之前创建的js文件；

import './config/rem.js'

3. 设置：

在项目中找到build\utils.js，定位至function generateLoaders在其上方定义如下：

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 50 /* //设计稿根元素*/
    }
  }

  // 以上的添加的px2rem的定义
  // 在下方generateLoaders方法中添加[cssLoader,px2remLoader]

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

 

1. 使用：

直接设置css样式使用px单位即可，如果不需要自动转换则在其后面加上/*no*/

 

第二种

一,1.流式布局加视口  

一,-webkit-box-sizing:border-bor处理防止内容溢出,做兼容处理

点击处理高亮的效果,

-webkit-tap-hightlight-color:transparent

<style>

* {
    margin: 0;
    padding: 0;
}
.html {
    /* 移动端ios禁止调整字体 */
    text-