【前端大屏自适应缩放】

已于 2024-02-16 17:12:40 修改
阅读量680 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 css
于 2023-08-09 17:26:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45832651/article/details/132190513
版权

🚀 作者 ：“码上有前”
🚀 文章简介 ：前端开发
🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬
在这里插入图片描述

前端大屏自适应缩放

往期精彩内容

【前端高频面试题–HTML篇】
【前端高频面试题–CSS上篇】
【前端高频面试题–CSS下篇】
【前端高频面试题–JS上篇】
【前端高频面试题–JS下篇】
【前端高频面试题–ES6篇】
【前端高频面试题–ES7-ES11】
【前端–异步编程】
【前端高频面试题–TypeScript篇】

【前端高频面试题–git篇】
【前端高频面试题–微信小程序篇】

【前端高频面试题–Vue基础篇】
【前端高频面试题–虚拟DOM篇】
【前端高频面试题–Vue3.0篇】
【前端高频面试题–Vuex上篇】
【前端高频面试题–Vuex下篇】
【前端高频面试题–Vue生命周期篇】
【前端高频面试题–Vue组件通信篇】
【前端高频面试题–Vue路由篇】

【前端-Vue3创建一个新项目】
【前端大屏自适应缩放】
【前端Vue3 + TS项目开发一般流程】

简介

前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。

使用CSS中transform属性和js获取缩放比例方法

	先简单写一下网页，先画一个大盒子container，再画自适应大屏盒子box，
再box中就是我们测试的两个小盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!-- 数据展示的区域 -->
        <div class="box">
            <div class="top">我是top部分，2035年实现基本社会主义现代化</div>
            <div class="bottom">我是bottom部分，
2050年实现第二个一百年奋斗目标，全面建成富强民主文明和谐美丽的社会主义现代化强国</div>
        </div>
    </div>
</body>
</html>

接着我们开始写css部分，主要用到vw和vh这两个属性单位和transform属性

* {
            margin: 0;
            padding: 0;
        }
        /* 大屏盒子box 使用fixed定位，将屏幕的尺寸设置为宽高 并通过 transform-origin: left top将变换的基点设置为屏幕左上角*/
        .container {
            width: 100vw;
            height: 100vh;
            background: url(./bg.png) no-repeat;
            background-size: cover;
        }
        .box {
            position: fixed;
            width: 1920px;
            height: 1080px;
            background: red;
            transform-origin: left top;
            left: 50%;
            top: 50%;
        }
        .top {
            width: 100px;
            height: 100px;
            background: hotpink;
            margin-left: 50px;
        }
        .bottom {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-left: 50px;
            margin-top: 100px;
        }

接着写js，通过resize控制屏幕尺寸大小

 //控制数据大屏放大与缩小
    let box = document.querySelector('.box');
    box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    //计算缩放的比例啦
    function getScale(w = 1920, h = 1080) {
        const ww = window.innerWidth / w;
        const wh = window.innerHeight / h;
        return ww < wh ? ww : wh;
        //ww<wh情况: 1920/1920(ww)   1080/1080(wh)
        //ww>wh情况:1920/1920(ww)   1080/1080(wh)
    }
 	// 防抖
    window.onresize = () => {
        box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    }

注意

同时还可以写防抖和多媒体查询使得屏幕缩放更加自如、
码上有前
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
数据可视化大屏自适应，保持比例不变形，满足不同分辨率的需求-利用transform的scale属性缩放，缩放整个页面
01-09
内容概要： 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属性缩放，缩放整个页面。
Vue3使用css特性transform实现可视化大屏自适应解决方案
07-29
操作：代码注释写的很详细，很容易就明白，对vue3不熟悉的小伙伴更加友好，将...PS：对于使用transform实现可视化大屏自适应方案，需要注意在缩放过程中内容区域的图片像素是否达标，否则会出现图片缩放后模糊的情况。
前端实现大屏缩放自适应屏幕
wgq2020的博客
11-02 2807
需要注意的是，在使用上述方法时，需要考虑到元素的排版和布局，不要因为缩放而导致元素重叠或者间距过大。同时，也需要权衡页面的性能和效果，避免使用过多的CSS和JavaScript导致页面加载过慢。使用CSS的@media查询来根据不同的屏幕大小调整元素的样式和布局。使用CSS3的缩放属性（transform: scale()）来缩放页面元素，以适应不同大小的屏幕。页面初始化获取屏幕的原始比例 将自适应元素的scale变量设置为当前比例 监听浏览器窗口大小，获取新的比例值重新给元素scale赋值。
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
最新发布
qq_42267338的博客
06-11 1356
/ 定义设计稿的宽高// px转vw。
前端大屏尺寸实现自适应屏幕大小
Run_youngman的博客
08-05 2765
文章中介绍了几种常见的实现响应式大屏布局的方案，分析了特性并且介绍了使用过程中遇到的一些需要注意的点，帮助大家读后能更好的理解，快去动手实践起来吧~
一行代码搞定前端可视化大屏自适应，开箱即用
astak3的博客
06-03 1636
因为可视化大屏大部分情况是在大屏幕上显示，比如电视机，显示器等，这些屏幕的分辨率一般都是。做个多个可视化大屏项目后，我们团队最终选择了第一种方案，也就是随意缩放。）不会触发（类似 mac 的屏幕就不会有），更多是出现在普通屏幕上（屏幕的宽高和设计稿的宽高比例，就是缩放比例，通过设置。不同的图表，地图组件使用的缩放可能不一样，有些会用。所以进行缩放时，尽量保持一致，避免不必要的 bug。时，就进行缩放，另一个方向的缩放比可以保持不变。，宽高都会缩放，也就变成了整体缩放。做缩放的技术，主要是。
前端自适应缩放解决方案
睡魔的博客
02-22 1449
设计师以1920*1080 比例给出设计稿， 需要高还原度实现效果可以使用等比例缩放页面方案，具体代码如下。
前端可视化大屏适配/自适应三种实现方式
m0_49016709的博客
05-16 4401
前端可视化大屏适配的三种解决思路
大屏前端代码（适应全屏幕）.rar
06-30
【大屏前端代码（适应全屏幕）.rar】是一个针对大屏幕显示的前端代码资源，主要涉及HTML、CSS和JavaScript技术，旨在实现网页在不同尺寸屏幕上的自适应布局。这个压缩包内包含了一个名为"bigdataUI－符"的文件，可能...
PC、移动端自适应等比缩放布局方案
11-16
### PC、移动端自适应等比缩放布局方案 随着互联网技术的发展与用户需求的变化，前端开发中的布局方式也在不断地演变。从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的...
15个前端数据大屏展示图+源代码免费下载
04-19
在IT行业中，前端开发是构建用户界面的关键环节，特别是在数据可视化领域，前端数据大屏展示图已经成为企业数据分析、监控和决策的重要工具。本资源提供的是一个包含15个前端数据大屏展示图的集合，同时附带源代码，...
web前端 图片缩放特效
xiaoLP1的博客
06-19 2878
web前端 图片缩放特效 如下图： 当鼠标进入div框内；图片发生放大或缩小
前端学习笔记85-缩放
weixin_45034895的博客
05-19 607
前端学习笔记85-缩放scale鼠标移入后图片放大效果scaleZtransform-origin scale 对元素进行缩放。 scaleX（）设置x轴方向的放大倍速。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
前端技术(11) : 缩放页面
Lxinccode的博客
12-21 1209
参考 :js整体缩小网页_妙用JavaScript实现网页的任意缩放_weixin_39901404的博客-CSDN博客 缩放为50% document.body.style.zoom=0.5; END。
PC端 VUE 官网项目 前端开发 响应式布局（宽+高 等比例缩放）
weixin_55846296的博客
08-01 6547
各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！
前端页面怎么固定缩放比例_Photoshop cc 2019自由变换默认等比例缩放操作问题怎么解决...
weixin_36087586的博客
01-12 2858
Photoshop cc 2019 中的自由变换，与之前版本的操作习惯有区别，不知道的还以为自己连Ctrl + T 都不会使用了，具体区别如下：Photoshop cc 2019 中的自由变换：1、什么都不按——等比例缩放;2、按住shift——自由变换;3、按住alt——以中心点等比例缩放4、按住shift + alt——以中心点自由缩放;————————————————————————————...
Web前端之变形：平移、旋转与缩放
花&败
11-24 1535
变形就是指通过css来改变元素的形状或位置变形不会影响到页面的布局transform用来设置元素的变形效果。
前端 大屏 缩放方案1
weixin_43869524的博客
11-18 485
前端大屏文字 界面缩放 方案一
大屏的自适应
m0_53912016的博客
03-15 1297
大屏自适应功能
vue项目做可视化大屏自适应缩放
05-17
Vue项目做可视化大屏自适应缩放可以尝试以下几个方案： 1. 使用CSS3的transform属性进行缩放 在Vue组件中设置一个容器元素，通过CSS3的transform属性对容器元素进行缩放，可以实现自适应缩放的效果。在容器元素的父元素中监听resize事件，根据父元素的宽度和高度来计算缩放比例，然后通过CSS3的transform属性对容器元素进行缩放。 示例代码： ```html <template> <div class="container" ref="container"> <!-- 可视化大屏内容 --> </div> </template> <script> export default { mounted() { window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { const container = this.$refs.container const parentWidth = container.parentNode.clientWidth const parentHeight = container.parentNode.clientHeight const contentWidth = container.offsetWidth const contentHeight = container.offsetHeight const scaleX = parentWidth / contentWidth const scaleY = parentHeight / contentHeight container.style.transform = `scale(${Math.min(scaleX, scaleY)})` } } } </script> <style> .container { transform-origin: top left; } </style> ``` 2. 使用Vue的自定义指令进行缩放 在Vue项目中可以创建一个自定义指令，通过该指令来实现自适应缩放的效果。在指令中监听resize事件，根据父元素的宽度和高度来计算缩放比例，然后通过CSS3的transform属性对元素进行缩放。 示例代码： ```html <template> <div class="container" v-resize-scale> <!-- 可视化大屏内容 --> </div> </template> <script> export default { directives: { resizeScale: { inserted(el) { function handleResize() { const parentWidth = el.parentNode.clientWidth const parentHeight = el.parentNode.clientHeight const contentWidth = el.offsetWidth const contentHeight = el.offsetHeight const scaleX = parentWidth / contentWidth const scaleY = parentHeight / contentHeight el.style.transform = `scale(${Math.min(scaleX, scaleY)})` } window.addEventListener('resize', handleResize) handleResize() }, unbind() { window.removeEventListener('resize', this.handleResize) } } } } </script> <style> .container { transform-origin: top left; } </style> ``` 以上两种方案可以根据实际需求进行选择，第一种方案比较简单，但是需要在组件中手动监听resize事件，第二种方案可以通过Vue的自定义指令来实现缩放效果，使得组件代码更加简洁。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码上有前

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

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

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

打赏作者

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

抵扣说明：

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

余额充值