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

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

相信大多数前端开发者都做过页面适配吧。你们是通过什么手段和方法去适配页面的呢？是通过rem？还是通过第三方工具库呢？近期我也在做适配页面的工作，无意中发现一种适配思想还比较实用，现在特地分享给大家：

适配思想：

我的适配思路是把整个页面看作一张图片，只要宽高比例相同，无论屏幕大小，里面布局和一些字体都不会改变。只会根据屏幕的大小去把整体的页面画布去放大缩小。下面看一下我是怎么实现的把

第一步：认识css3新特性： transform

首先我是通过css3的一个新特性transform来实现的，下面我来给大家介绍一下transform：

CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画

transform的旋转 rotate

rotate支持一个参数,一个角度值 0-360deg

transform: rotate(180deg); //实现旋转，左上角的东西会在右小角显示

transform的缩放 scale

scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正常,<1为缩放,>1为放大;

transform: scale(0.8); //缩小为正常的0.8倍

注意：scale提供两个子方法,scaleX,scaleY,用来分别设置x或y的缩放;

transform的倾斜 skew

skew支持两个参数(x,y),参数类型为角度(deg),如果不填y的话,则默认为0(与缩放不同);

  transform: skew(45deg); //文本沿x轴向左倾斜45°
  transform: skew(0,45deg); //文本沿y轴向下倾斜45°

注：如果仅设x或y,可直接使用两个子方法,skewX与skewY;

transform的平移 translate

translate接收两个参数(x,y)为平移的距离,如不填y值,则默认为0,支持所有CSS内有效的长度单位(使用translate用来移动元素不会触发重排,只有重绘);

  transform: translate(20px,5vh) //向左移动20像素，向下移动百分之5的视窗高度

注：同样有两个子方法,translateX,translateY;

第二步：利用transform的缩放 scale来完成适配工作

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

  	width: 1920px !important;  //设计稿的宽
    height: 1080px !important; //设计稿的高
    background-color: #030409;
    color: #fff;
    position: relative;  
    transform: scale(var(--scale)) !important;  //动态设置缩放的值
    transform-origin: left top; //沿着左上角去缩放

	// 这个div是最外层的div，缩放就是加在了它身上，把它想象成一张图片，比例相同，无限放大和缩小都会影响布局
  	 <div id="data-view" :style="{ '--scale': scale }"></div>

这时候要注意了，因为每块屏幕不一样，所以这个缩放的数值不是个固定的值，所以是个变量。这时候我们就要进入页面的时候计算出来这个缩放值

		this.scale = window.innerWidth / 1920; //根据所展示的屏幕计算出要缩放的大小
        window.onresize = () => {
          this.scale = window.innerWidth / 1920;
        };

这时候就做好了这个适配页面工作，是不是很简单。动手做起来试试看吧

来看一下适配案例效果

总结：

缩放做出来的大屏适配很根据比例撑满整个屏幕，布局也是跟着放大而放大，缩小而缩小。比较好用的一个适配方案。另外注意：尺寸所要的是分辨率(就是px)，每个屏幕都会有个分辨率。我们要严格按照设计稿给的尺寸去写页面布局