CSS媒体查询帮助

Question

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

“显示大小”列表中列出的大小对应于“最佳画布宽度”列表。

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

1. 800×600
2. 1024×768
3. 1280×800

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

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

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

这是我到目前为止所做的：

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

我想知道的是，如果我这样做的话。希望我已经足够清楚地解释了这一点！提前谢谢！

Answer 1

不确定'only'，但是看起来不错。这将匹配780和1220px之间的屏幕。您应该为其他尺寸添加其他查询，以包含这些尺寸的不同文件。

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

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