CSS媒體查詢援助

Question

我需要構建一個媒體查詢，這將讓我針對臺式機/筆記本電腦的幫助。我使用下面的表格作爲顯示尺寸的參考。在顯示尺寸列表

列出的尺寸對應的最佳畫布寬度列表。

顯示大小（以像素爲單位）：

1. 800x600的
2. 1024×768
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和1220px寬的屏幕。您應該爲其他尺寸添加其他查詢以包含這些尺寸的不同文件。

切記不要指定最小寬度爲最小，也沒有最大寬度爲最大，否則你不會有任何（特定的）造型上非常小或非常大的屏幕。

注意，你可以很容易地測試你的媒體查詢。只需調整您的瀏覽器窗口。