vue2大屏适配lib-flexible与postcss-px2rem

最新推荐文章于 2024-09-05 23:45:00 发布
最新推荐文章于 2024-09-05 23:45:00 发布
阅读量1.1k 收藏 4
点赞数 1
文章标签： postcss 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ksjdbdh/article/details/129917321
版权

vue2大屏适配这里采用了一个新的方案，由于这个项目就是一个PC大屏，所以需要对整个项目进行适配，postcss-px2rem就是对所有的px转变成为rem的，由于rem是根据font-size的值改变元素大小的，所以他们搭配起来就很完美。
lib-flexible与postcss-px2rem
由于本人亲自尝试，使用npm下载lib-flexible成功之后，但是在main.js中引入成功之后html元素的font-size没有随着页面的大小而改变，所以这里采用了另一个方案，直接从libe-flexible下载他的源码，然后放入到项目中，在main.js中直接import，lib-flexible的唯一作用就是拖动浏览器可以改变html的字体大小，如果大小改变了，那么就说明这一步成功了。
首先在vue.config.js中配置postcss-px2rem，这里使用的是vue2，配置如下：
在这里插入图片描述

在main.js中引入lib-flexile
在这里插入图片描述
然后去测试：
在这里插入图片描述
这里写了一个在1920px×1080px下一个960px×440px的盒子，那么他在1920px×1080px的屏幕下盒子大小为960px×440px，在其他屏幕下页应该占有四分之一，
在这里插入图片描述

白嫖leader
关注
lib-flexible结合postcss-pxtorem实现大屏自适应
monkeier的博客
08-06 429
例如我给ECharts组件，比如说折线图LineChart传了一个Height属性，来定义height，对于props接收的属性，用于style很不方便，最简单的方式就是内联样式。2.rootValue的值为 设计稿（屏幕）像素宽度/10，比如说你的ui设计稿是1920x1080的屏幕，那就设置192，如果是给手机用的，比如苹果宽度390，那就设置39。" />，因为插件不能识别，倘若遇到不得不这样用的情况呢？为了解决版本问题，防止后续有什么奇怪的bug，安装用以下语句（安装失败换淘宝镜像源）
vue 可视化大屏适配插件之过程篇
郊眠寺
09-29 808
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识
vue2如何使用flexible.js
最新发布
weixin_54048131的博客
09-05 457
首先，你需要安装。如果你正在使用 npm 或 yarn 来管理你的项目依赖，可以通过下面的命令来安装：bash深色版本。
Vue 可视化大屏适配插件之过程篇
LuckyWinty的博客
10-11 719
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群一直以来都想自己写一款插件去解决大屏的适配问题，最近终于有时间去完成这件事，特此记录下过程中碰到的问题。注册 vue 指令如何支持类型提示?文档说 vue 插件的 use方法是支持第二个参数的，一开始打算通过第二个参数做基础配置。能正确读取到该参数，可是不知道怎么做类型提示，因为官方定义的是 any[]， 那我总不能让使用者去从我的插件里导...
vue中pc端大屏怎么进行rem适配（lib-flexible + postcss-plugin-px2rem）
lannieZ的博客
12-06 994
lib-flexible + postcss-plugin-px2rem
vue 大屏适配(vue2)
m0_47559177的博客
04-16 561
vue2 ScaleBox组件。
vue2 mixin的方式 大屏适配（缩放居中的方式）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
11-16 562
使用要求：指定容器的 id 为 bigScreenContainer。
VUE2.X 使用lib-flexible px2rem-loader 实现1920*1080下的等比缩小
weixin_44472982的博客
05-30 1397
效果 1.先用脚手架安装基础框架 并实现一个水平居中的效果 如下图所示 结构目录如下 reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, s
vue-cli 3.0 移动端适配&&忽略依赖（UI库）的px转换&&大屏适配
ZhengCC_9510的博客
04-01 397
vue-cli 3.0 + lib-flexible + postcss-px2rem-exclude 卸掉 postcss-px2rem 它不可以指定忽略文件夹 装上 postcss-px2rem-exclude 它可以指定忽略文件夹 装 yarn add lib-flexible yarn add postcss-px2rem-exclude // 可以指定忽略文件夹 postcss-px2rem 不行 引（main.js） import ‘lib-flexible’ 配 postc
前端自适应postcss-pxtorem使用介绍
qq_16874501的博客
01-04 1532
安装插件 yarn add lib-flexible postcss-px2rem 在 public 中的 index.html 中删除 meta 标签 flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。 在 src / main.js 中导入插件包 // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-si..
postcss-pxtorem 大屏
07-27
另外，如果你还需要使用lib-flexible来进行大屏适配，可以使用npm命令进行安装，例如：npm install lib-flexible --save-dev。\[3\] 这样，你就可以使用postcss-pxtorem插件来实现大屏展示系统的布局自适应了。 ###...
vue项目PC端如何适配不同分辨率屏幕字体和整体布局适应(二)
m0_49714202的博客
02-15 8864
一. 字体随分辨率变化屏幕字体适应 首先了解下 rem与px的转换哈 rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 我们知道，浏览器默认的字号（font-size）16px，来看一些px单位与rem之间的转换关系： | px | rem | ------------------------ | 12 | 12/16 = .75 | | 14 | 14/16 = .875 | | 16 |
Vue2的pc端项目的屏幕适配
zzz000fff的博客
05-18 1557
你还在用媒体查询布局跟响应式布局吗？现在强大的插件已经可以帮我们解决屏幕适配的问题了！！！话不多说，上代码！
Vue2 - 完美解决在项目中页面布局实现自适应屏幕大小的解决方案
前端充电宝
04-13 1709
Vue2 - 完美解决在项目中页面布局实现自适应屏幕大小的解决方案
Vue2实现自适应屏幕大小的两种方法详解
菜鸟教程
05-06 3822
教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/
一个vue2中大屏适配的组件
m0_69696922的博客
04-02 568
大屏适配
vue使用lib-flexible实现屏幕适配
书中自有妍如玉的博客
12-02 2346
因为在开发中拿到的设计稿页面像素单位是px，要是每一次都需要手动转成rem的话，就十分耗费时间精力，所以px2rem-loader就可以帮我们的大忙了。5、完成了上面步骤后，就可以对页面涉及到的css宽度、高度，还是正常采用px单位编写像素值，项目会自动将px转换成rem，并保持自适应适配效果。2、import 'lib-flexible //在vue项目里面的src目录下的main.js文件全局引用'1、npm install lib-flexible -S //安装lib-flexible。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 1696
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
【Vue2 pc端项目不同分辨率屏幕窗口自适应】
qq_48573827的博客
11-10 1274
可以直接将下面代码放到main.js文件中，也可以单独写一个js文件，然后在main.js 中挂载。postcss-pxtorem 插件会将页面中的px像素单位，经过计算然后改写成rem，配置完成以后 就会将项目中写的500px像素单位转写成31.25rem单位。我这边是按照1920的尺寸设置，可以根据实际大小设置。在项目中根据原型图上的数据单位来进行样式编辑就可以。至此窗口自适应大小就配置完了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白嫖leader

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值