移动端 页面适配 原生js及lib-flexible 插件

1.js 原生

;(function(win, doc) {
  change()
  function change() {
   var remSize = window.innerWidth / 7.5 || 50  /*设计稿是以width = 750px 为基准的*/
  document.querySelector('html').style.fontSize = (remSize > 100 ? 100 : remSize) + 'px'
  }
  win.addEventListener('resize', change, false)
  win.addEventListener(
    'orientationchange',
    change,
    false
  ) /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window, document)

这个在vue项目中也可使用，直接在主入口文件index.html中写入，或者你可以将其封装为一个js方法，在mian.js文中引入

import 'XX.js'  /*必须放在最前面引入*/

2.使用插件 lib-flexible

1.安装插件 lib-flexible

npm i lib-flexible --save

2 .在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3 .安装px2rem loader

npm install px2rem-loader

4 .配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

我之前将这个配置错写为

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: 75
  }

结果报错为：

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
 const loaders = [cssLoader, px2remLoader]
    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

扫描二维码关注公众号，回复： 8668007 查看本文章

5.此时配置已经完成，接下来看看使用
在这里，我们设置了一个div的宽度是200px，

使用 lib-flexible 插件遇到的问题

1，如果你在375屏幕之下 html的data-dpr 使用值为1，检查你html的头部是否添加了

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

在使用这个插件的时候，不需要加

<meta name="viewport">   插件会自动给你添加上

2.如果你给div 设置样式

div{
width:200px;
height:200px;
border:1px solid red;
}

你会发现在经过了px->rem->px这个过程中，将div的大小包含了border的width ，div的width变成了102px；