html - CSS 媒体查询帮助

Question

我需要帮助构建媒体查询，这将允许我定位台式机/笔记本电脑。我使用下表作为显示尺寸的参考。

显示尺寸列表中列出的尺寸对应于最佳画布宽度列表。

显示尺寸（以像素为单位）：

1. 800x600
2. 1024x768
3. 1280x800

最佳画布宽度（以像素为单位）：

1. 宽度 780
2. 宽度 960
3. 宽度 1220

我用作参考的表格基本上列出了用于每个显示尺寸的布局宽度，但这不是我所困惑的。我不明白的是如何为这些宽度内的所有样式构建媒体查询。

这是我到目前为止所拥有的：

<link rel="stylesheet" href="file.css" media="only screen and (min-width: 780px) and (max-width: 1220px)">

我只想知道我这样做是否正确。希望我已经解释得足够清楚了！提前致谢！

Answer 1

不确定“唯一”，但除此之外它看起来不错。这将匹配 780 到 1220 像素宽的屏幕。您应该为其他大小添加其他查询以包含这些大小的不同文件。

记住不要为最小的指定最小宽度，最大的不要指定最大宽度，否则在非常小或非常大的屏幕上您将没有任何（特定）样式。

请注意，您可以很容易地测试您的媒体查询。只需调整浏览器窗口的大小。