大屏可视化页面或者前端页面如何快速适配？？

Anly_Zz

已于 2023-12-11 11:09:35 修改

阅读量99

点赞数

文章标签：前端 css3 html javascript

于 2023-12-07 17:36:36 首次发布

本文链接：https://blog.csdn.net/Anly_Zz/article/details/134860070

版权

本文介绍了如何使用CSS3的transform属性，特别是scale缩放功能，实现在不同屏幕尺寸下元素的自适应。通过计算窗口宽度与设计稿尺寸的比例动态设置`scale`，确保在标准、非标准和手机端都能正确适配。

摘要由CSDN通过智能技术生成

适配思路

使用css3的新特性transforml来实现，transform有旋转rotate，缩放 scale，倾斜 skew，平移 translate。这里我们需要用到的就是transform的缩放 scale

实现方法

首先我们想要那一块标签或者div适配我们严格给定一个设计稿的宽高尺寸。然后我们再去计算一下放大或者缩小的倍数

这里因为需要适配的屏幕都不一样，所以这里缩放值scale是一个变量，不能是固定值，这样就需要我们在进入页面的时候就需要计算一下这个缩放值

然后在这个页面的created或者mounted生命周期执行该函数即可

然后献上效果图

这是标准情况下

这是不标准的情况下

手机端也适配

最后上代码

这里只上了适配的关键代码，其他视图效果代码不做展示

#bodbox{
    width: 1920px;
    height: 1080px;
    position: relative;
    transform: scale(var(--scale)) !important;
    transform-origin: left top;
    background-image: url('@/assets/image/backgroundImg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

<template>
  <div id="bodbox" :style="{'--scale':scale}">
    <div class="header">
    </div>
  </div>
<template>

data() {
    return {
        scale:1
    }
}
created() {
    this.flgScale()
},
methods: {
    flgScale(){
        console.log(window,22222);
        this.scale = window.innerWidth/1920
        window.onresize = () => {
            this.scale = window.innerWidth/1920
        }
    }
},

此文章仅作参考和本人工作中发现的问题记录，如有其他问题欢迎指出