程序地带

@vue/cli 实现pc端分辨率适配(可用于大屏开发)


参考文章: https://blog.csdn.net/weixin_41257563/article/details/97266234

项目框架: 项目是基于vue-cli3生成的工程化项目


vue create projectName

依赖: 1.自适应方案核心: 阿里可伸缩布局方案 lib-flexible 2.px转rem:px2rem,它有webpack的loader: px2rem-loader


一.安装


yarn add lib-flexible -S
yarn add px2rem-loader -D

二.lib-flexible使用 在入口文件 main.js 里引入 lib-flexible


// main.js
import 'lib-flexible'

在这里插入图片描述 通过以上步骤引入lib-flexible之后, 项目中就可以使用rem了, 实现了可伸缩布局。


但是在实际开发中,我们通过设计稿得到的单位是px,所以要将px转为rem放入样式中。但如果都需要手动转的话,就很麻烦,所以需要一个工具替我们完成这项工作,这个时候就需要配置px2rem了。


三.px2rem-loader使用 在vue.config.js中配置webpack依赖, px2rem-loader 的 remUnit通常设置成设计稿的1/10即可, 假设设计稿是1280px, 则可以设置remUnit为128, 代表1rem = 多少像素; remPrecision 参数表示换算的rem保留几位小数点


// vue.config.js
chainWebpack: config => {
config.module
.rule('css')
.test(/.css$/)
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.options({
remUnit: 128
remPrecision: 8
})
.end()
}

在这里插入图片描述 但是有一个问题,我明明设置的宽度是按1280px来的,为什么计算出来1rem=54px? 在这里插入图片描述 这是因为lib-flexible依赖的文件中当宽度540px时, 把宽度定死为540px, 我们需要把它改成自动获取宽度即可.


// node_modules/lib-flexible/flexible.js 找到对应文件
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width = 540 * dpr;// 获取屏幕宽度, 当屏幕大于540时,这里写死了540,只需要改成获取当屏幕宽度即可
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}

在这里插入图片描述 重启项目可效果: 在这里插入图片描述 配置好后, 不管是移动端还是pc端还是大屏开发都可以轻松应对~ 完结撒花🎉


说个题外话, 根据上面配置好了之后, 在页面中可以直接按照设计图来写样式, 不需要进行任何换算, 但不知道会不会也有同学和我一样会想它到底是如何计算的呢? 反正我是想了很久, 下面是我的理解:


项目中设置box的宽度为1280px, 且remUnit为128 .box{ width:1280px }在浏览器中, px2rem将px自动转成rem, 计算方法如下: .box的宽度转成rem= 1280px/128= 10rem而html根元素的字体大小由lib-flexible控制, 如果此时为 font-size:100px 那么box的实际宽度=100px*10rem=1000px那么lib-flexible是又是如何根据屏幕宽度设置根元素的字体大小呢? 在这里插入图片描述 上图可以看出根元素的字体=当前屏幕宽度/10 =1rem 看到这里, 相信大家的疑惑应该解开了 不足的地方望大家指正~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/L_Sarah/article/details/112689138

随机推荐

rust有pve模式吗_Rust模式解构

模式解构—PatternDestructure,其对应的就是模式构造,因此模式解构是将原本组合起来的结构分解为单独的、局部的、原始的部分。1.模式解构示例我们之前在学习tu...

weixin_39637545 阅读(453)

Postman如何做接口关联?再简单不过了!

Postman如何做接口关联?再简单不过了!

Postman接口关联需求分析解决思路需求分析接口分别为:手机归属地查询/天气查询通过获取手机归属地的城市名来查询该城市的天气解决思路先获取手机归属地的城市名,将城市名设置...

码上开始 阅读(608)

了解View

View接口说明基础API构造方法voidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)用途参数布局模式宽和高的实际值voidonDraw(Ca...

蓝天白云水清澈 阅读(122)