实现vuepc端自适应方案

实现vuepc端自适应方案

lib-flexible + px2rem Loader
lib-flexible 阿里伸缩布局方案
px2rem-loader：px转rem；

依赖
首先需要安装 vue-cli 脚手架，这里我安装的是 cli3。
项目初始化完成后，在项目目录中安装 lib-flexible 和 px2rem-loader。

 npm install lib-flexible --save-dev
 npm i postcss-px2rem --save

接着在项目入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

配置 postcss-px2rem
在实际开发中得到的设计稿都是 px 单位的，如果手动将 px 转为 rem ，显然是一件较为麻烦的事情，因此可以通过一些工具来帮助我们实现。

vue-cli3 因为减少了对于 webpack 的配置，因此有些文件就被隐藏起来了。可以在文件的根目录下新建一个 vue.config.js 文件，在这个文件里就可以自己增加或修改一些 webpack 配置。

首先添加一个新的 Loader，vue-cli 的文档中也写的非常清楚了，需要在文件中添加以下代码

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({ remUnit: 192 })
            .end()
    }
}

此时重启服务器就生效以上配置了。但还是存在一些问题，虽然可以转换为 rem 了，但是计算出来的比例确实 1rem = 54px，这是因为 flexible.js 文件会默认写死了一个比例，我们需要作出一些修改。

flexible.js文件中，找到refreshRem方法，替换掉；

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            //  width = 540 * dpr;   就是这里的问题，需要将 540 修改为 width，不将宽度写死就ok了。
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

这时候重新跑以下项目；就会发现1rem=192px了；
以下代码意思是 设计稿是1920宽度的；量出来100px 传入conversinon函数中，处理后 就是换算后rem的值；这样就可以实现自适应pc端页面了；
必要时可以考虑加入流式布局，弹性盒，媒体查询结合使用；

<style scoped lang="scss">

@function conversion($num) {
  //换算rem适配pc端
  @return $num/192;
}

.boxTest{
  width:conversion(100)+rem;
  height:conversion(100)+rem;
  border: 1px solid #000;
}

本文地址：https://blog.csdn.net/zhangyubababa/article/details/109624275