vuepc端实现数据加载_实现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端页面了；

必要时可以考虑加入流式布局，弹性盒，媒体查询结合使用；

@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

希望与广大网友互动？？

点此进行留言吧！