vue3 将px转为vw(大屏展示可用)

1.装依赖

"cssnano": "^4.1.10",

"cssnano-preset-advanced": "^4.0.7",

"postcss-aspect-ratio-mini": "^1.0.1",

"postcss-cssnext": "^3.1.0",

"postcss-import": "^12.0.1",

"postcss-loader": "^3.0.0",

"postcss-px-to-viewport": "^1.1.1",

"postcss-url": "^8.0.0",

"postcss-viewport-units": "^0.1.6",

"postcss-write-svg": "^3.0.1",

可通过此命令安装: cnpm i 依赖包名 --save

2.在package.json对postcss进行配置。

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
selectorBlackList: [‘.ignore‘, ‘.hairlines‘],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}

原文地址:https://www.cnblogs.com/miaSlady/p/11642976.html

时间: 2024-10-09 03:26:19

vue3 将px转为vw(大屏展示可用)的相关文章

大屏展示OneOaaS Monitor社区版发布

原文:http://url.cn/45XM0x2 ,请关注OneOaaS公众号获取更多信息     OneOaaS Monitor社区版正式发布,只需要2分钟,即可实现大屏展示 主要功能:故障展示大屏,可以替换Zabbix的Dashboard,在大屏上面展示故障 界面如下 功能概要 数据采集速率 当前故障数量 当前有故障的设备数量 当前故障按不同级别分布图 故障列表,可按最低故障级别过滤 故障数量趋势图,可按时间过滤 所有模块都支持定时刷新,可选择刷新周期 新版本消息提示 后续版本会逐步发布gr

Power BI 案例篇之大屏展示

Power BI 很多小伙伴日冲都会用到他做报告,其中 Power BI 还可以做大屏展示. 今天小编就为大家分享一个使用 Power BI 制作的大屏展示. 在Power BI 大屏设计中对背景的设计和配色比较有要求,主要是如果配色和布局搭配不好的话,就不会有大屏的感觉. 大屏其实我们抓住一个重点就行,科技感. 接下来让我们一起看看下面几个大屏的效果吧.大家发现了吗,上面这个大屏的背景元素都是以圆滑的轮廓为主,那我们再看看同样的换成方形的轮廓效果如何呢.大家可以回复我您觉得圆形的轮廓效果好还是

echarts大屏展示数据

1.准备工具 1)echarts 去官网下载镜像 https://www.echartsjs.com/zh/download.html 在终端进行 pip 安装 pip install pyecharts-1.7.1-py3-none-any.whl 安装完成之后,我们测试一下, from pyecharts import Bar 报错了,但是并不是因为我们的安装有问题,而是版本不同的问题造成的 from pyecharts.charts import Bar 这样倒入包就没有问题了 用小段代码

flex布局构建大屏框架并支持翻页动画、滚动表格功能

本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效果图: 滚动列表效果图及核心代码: var myH = $(".tableBoy").height() + 10;//获取容器高度 确定可视区域 $(".tableBoy").css({ 'height': myH + "px", "overf

如何构建可视化的营销数据大屏?

数据可视化大屏是数据展现最直观最全面的方式之一,对于企业重要数据指标的展示和实时数据的监测,是目前极佳的方案. 对于大屏数据展示,某知名汽车制造厂商的信息化团队有着深刻的建设经验. 该公司目前拥有两个工厂,年产量逾50万台.与此同时,公司的信息化建设也随着公司的发展在不断扩大,逐渐开始建设各类信息系统,目前公司系统总量有七八十个. 制造行业的业务流程可以说是最长的,从最早的研发.生产.制造.营销.售后.财务.采购以及综合管理,对于管理层而言流程十分复杂.众多领导对于信息数据的要求是希望只登录一个

大屏联动竟如此简单???

在迅猛发展的信息时代,大屏展示已经广泛应用于通讯.电力.军队指挥机构, 在提供共享信息.决策支持.态势显示等方面发挥着重要作用.在这些光鲜.绚丽.庞大的解决方案背后,其实是由一个个小而又实用的技术细节实现来支撑的,比如:大屏组件间的联动 对的,你是不是已经知道接下来小编要介绍些什么了,那我们就开始吧 小编今天就是要带大家 get 一下[润乾报表]中怎样轻松搞定大屏组件间的联动效果.实例效果图如下所示: 当我们点击地图中某个的地区时,右侧仪表盘和柱形图随之对应显示该地区的数据值. 小伙伴们,注意啦

《大屏可视化数据》该怎么设计?

前言:数据可视化是什么?可视化数据有哪些主要特征?为什么要使用大屏展示可视化数据?数据可视化是综合运用计算机图形学.图像.人机交互等,将采集.清洗.转换.处理过的符合标准和规范的数据映射为可识别的图形.图像.动画甚至视频,并允许用户与数据可视化进行交互和分析.使用数据可视化可以丰富内容,引人注意,调动人的情绪.引发人的共鸣,传递文化和价值.可视化数据的最主要目三个特征:新颖而有趣.充实而高效.美感且悦.以大屏作为可视化数据的主要载体,其原因在于面积大.可展示信息多.便于关键信息的共享讨论及决策,

大数据可视化大屏设计经验,教给你!

 前言    大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习这方面的设计. 今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计.交互设计.动效设计三个方面来分享.  UI设计   设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要建立在不影响数据的有效展示上!   下图是天猫可视化大屏设计,图中屌炸天的3D地球围绕粒

徒手教你制作运维监控大屏

公司业务的不断发展,紧接而来的是业务种类的增加.服务器数量的增长.网络环境的越发复杂以及发布更加频繁,从而不可避免地带来了线上事故的增多,因此需要对服务器到应用的全方位监控,提前预警. 建立在Zabbix上的服务器监控.基础应用监控(mysql.redis.ES等).预警功能 基本满足底层的监控预警要求,超过设定的阀值就会提前通知相关人员去解决. 有了Zabbix为什么还需要Grafana? Zabbix图表聚合功能非常薄弱,这不是它的强项,而且数据源只限定自己的收集器,图表展示类就是Grafa