数据可视化大屏自适应,保持比例不变形,满足不同分辨率的需求-利用transform的scale属性缩放,缩放整个页面

上传者: shanghai597 | 上传时间: 2024-09-06 11:23:49 | 文件大小: 99KB | 文件类型: ZIP
内容概要: 1、数据可视化大屏自适应,满足不同分辨率需求。 2、利用transform的scale属性缩放,缩放整个页面。。 3、在任意屏幕下保持16:9的比例,保持显示效果一致。 4、更宽:(Width / Height) > 16/9,以高度为基准,去适配宽度。 5、更高:(Width / Height) < 16/9,以宽度为基准,去适配高度。 6、1920*1080的分辨率大屏页面(16:9)比例效果演示。 7、1024*768的分辨率大屏页面(4:3)比例效果演示。 8、8400*3150的分辨率大屏页面(不规则)比例效果演示。 适合人群: 1、具备一定前端基础,熟悉CSS的开发者。 能学到什么: 1、做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。 2、利用transform的scale属性缩放,缩放整个页面。

文件下载

资源详情

[{"title":"( 16 个子文件 99KB ) 数据可视化大屏自适应,保持比例不变形,满足不同分辨率的需求-利用transform的scale属性缩放,缩放整个页面","children":[{"title":"babel.config.js <span style='color:#111;'> 73B </span>","children":null,"spread":false},{"title":"src","children":[{"title":"App.vue <span style='color:#111;'> 379B </span>","children":null,"spread":false},{"title":"assets","children":[{"title":"logo.png <span style='color:#111;'> 6.69KB </span>","children":null,"spread":false}],"spread":true},{"title":"main.js <span style='color:#111;'> 185B </span>","children":null,"spread":false},{"title":"components","children":[{"title":"AutoScalContainer.vue <span style='color:#111;'> 1.86KB </span>","children":null,"spread":false}],"spread":true},{"title":"router","children":[{"title":"index.js <span style='color:#111;'> 918B </span>","children":null,"spread":false}],"spread":true},{"title":"views","children":[{"title":"HelloWorld.vue <span style='color:#111;'> 1.14KB </span>","children":null,"spread":false},{"title":"AboutView.vue <span style='color:#111;'> 1.21KB </span>","children":null,"spread":false},{"title":"HomeView.vue <span style='color:#111;'> 1.14KB </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"jsconfig.json <span style='color:#111;'> 279B </span>","children":null,"spread":false},{"title":"package.json <span style='color:#111;'> 512B </span>","children":null,"spread":false},{"title":"public","children":[{"title":"favicon.ico <span style='color:#111;'> 4.19KB </span>","children":null,"spread":false},{"title":"index.html <span style='color:#111;'> 611B </span>","children":null,"spread":false}],"spread":true},{"title":"package-lock.json <span style='color:#111;'> 316.13KB </span>","children":null,"spread":false},{"title":"vue.config.js <span style='color:#111;'> 118B </span>","children":null,"spread":false},{"title":"README.md <span style='color:#111;'> 269B </span>","children":null,"spread":false}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明