html - CSS 媒体查询帮助

Question

我在构建媒体查询方面需要帮助，这将使我能够定位台式机/笔记本电脑。我使用下表作为显示尺寸的引用。

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

显示尺寸(以像素为单位):

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

最佳 Canvas 宽度(以像素为单位):

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 像素宽的屏幕。您应该为其他大小添加其他查询，以包含这些大小的不同文件。

切记不要为最小的指定 min-width，也不要为最大的指定 max-width，否则在非常小或非常大的屏幕上您将没有任何(特定的)样式。

请注意，您可以非常轻松地测试媒体查询。只需调整浏览器窗口的大小即可。