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

Question

我有一个名为GforGadget的网站。页面宽度非常适合15.6笔记本电脑。 但是当涉及到更大的显示器时，它就被毁了。你能帮忙吗？ 任何@media样式要添加？ 谢谢

Answer 1

如果以px为单位，请按％值给出宽度，

Answer 2

看来您是为屏幕分辨率专门编写了CSS。要解决此问题，您需要使用媒体查询。示例：

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

我检查了一下，在较小的屏幕上也有类似的问题。您想应用移动优先策略，因此布局在所有屏幕上看起来都不错。应用相同的策略（媒体查询）来设置不同分辨率的差异大小。最常见的解决方案是使用3个断点。示例：

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

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