怎么解决浏览器缩放打乱布局的问题？

Posted 2023-05-15

你左右两边的宽度是多少，是像素还是百分比。
如果你定义定义的页面宽度是百分比，建议你定义布局其他宽度的时候都是用百分比。
如果你是除了页面定义100%，其他的都是定义的像素那么不用想，必须错屏没商量。 参考技术A 首先，css样式：*
margin:0;
padding:0;


div
position:absolute;

left:50%;

top:50%;

width:100px;
height:100px;
background-color:red;
margin-left:-50px;

margin-top:-50px;



因为 width:100px，所以 margin-left:-50px; 是正好一半的值。而 left:50%;和 top:50%;是相对浏览器的定位用的，所以居中是正中，跟随页面改变而居中

而把 absolute 改成 fixed 就是一个随着滚动条移动但是永远居中的小广告

浏览器缩放，会导致布局打乱，解决方法？/一缩小网页布局就打乱了怎么办？

原因通常就是你的元素浮动了，最好设置个最小宽度min-width:具体宽度值 px;，如果你需要自适应，用media查询

 

有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度，而子元素用固定的px设置宽度，当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-width
---------------------

原文：https://blog.csdn.net/qq_35661171/article/details/78734497