css - 为什么我的网站页面宽度不同

Question

我有一个网站。页面宽度在 15.6 笔记本电脑中是完美的。但是当涉及到更大的显示器时，它就会被毁掉。你能帮忙吗？要添加任何@media 样式吗？谢谢

Answer 1

您似乎专门为屏幕分辨率编写了 CSS。要解决这个问题，您需要使用媒体查询。示例:

@media (min-width: 1280px) {
    width: 1120px;
}

我检查过，你在较小的屏幕上也有类似的问题。您希望应用移动优先策略，以便布局在所有屏幕上看起来都不错。应用相同的策略(媒体查询)为不同的分辨率设置差异大小。最常见的解决方案是使用 3 个断点。示例:

@media (min-width: 768px) { }
@media (min-width: 1280px) { }
@media (min-width: 1440px) { }

您在这些媒体查询中编写的 CSS 将针对不同的屏幕尺寸，但如果未被覆盖，最小媒体查询中的 CSS 也将适用于下一个媒体查询。