放大浏览器时站点显示问题

Question

我在网站http://madamrimma.by/上遇到问题，当浏览器规模小于100％时，网站显示错误：http://joxi.ru/qlrGUhjKTJBMAUGBReA。本网站不是由我创建的，我不明白它是如何发生的。

Answer 1

这是因为缩小浏览器实际上会增加页面的宽度（以像素为单位）。虽然浏览器可能占用1024px，但当页面缩小时，DOM中表示的像素数实际上超过1024px。

此外，还有一些媒体查询可以控制页面的外观。如果查看#wrappen，则存在以下CSS：

@media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
    width: 1170px;
    margin: 0 auto;
    box-shadow: 0 0 20px #f25aeb;
    background: #fff;
}

当您缩减浏览器时，DOM中表示的像素数超过1920px。因此，忽略#wrappen强加的固定宽度布局，并且布局中断。

如果您拥有极高分辨率的显示器，您还可以将浏览器窗口的大小调整为超过1920像素并具有相同的效果。

修复

对此的修复很容易。只需删除有问题的max-width媒体查询即可。当然，这对于高分辨率屏幕来说并不是最佳选择，因为大多数空间都被浪费了，但至少布局不会破坏。

Answer 2

主要问题是在代码中为div元素设置了固定宽度。将它们更改为％，以便修复它。每个元素都应该居中对齐。

Answer 3

我使用此媒体查询：

/* Mobile styles go first, without media 
queries. */
@media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320 
pixels) */
}
@media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels) 
*/
}
@media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024 
pixels) */
}
@media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140 
pixels) */
}

对于每个分辨率都有效。