【CSS】网页如何快速适应大屏显示，快速自适应，旧版网站改造

记录工作中的一次无聊需求，原来的老项目没有自适应，突然要整个改成适应7680*2160px大屏幕

解决办法

使用CSS媒体查询@media与样式属性zoom:3;结合，放大整个屏幕

@media:不同分辨率修改样式
zoom属性设置或检索对象的缩放比例，通俗的理解我们在body标签添加一个class标签，在使用媒体查询的方式去修改zoom的值，这样就达到了不同分辨率下不用再去针对性的修改样式

@media screen and (min-width: 7000px){
	这里写大屏的定制样式

	.sidecontent{
      zoom: 3;
    }
}

其他兼容问题

给zoom样式加了个判断浏览器,是谷歌就生效,不是就不生效.
然后也给火狐适配了一下.
将中间的框用个div包起来 然后将中间使用transform:scale()进行缩小,缩小到原来的0.8,然后左右距离边边各10%.
代码如下:

@media screen and (-webkit-min-device-pixel-ratio:0) {
   body{
	transform:scale(0.8);
	
	}
}

@-moz-document  url-prefix()  {
   .test111{
		transform:scale(0.8);
		transform-origin:top left;
		margin-left:10%;
		width:100%;
	}
}

另外的自适应

https://blog.csdn.net/weixin_42960907/article/details/123418390