如何爲比您擁有的大屏幕編寫媒體查詢？

Question

如果我僅限於說1920 x 1080的屏幕，如何在無法測試的情況下爲更大的屏幕尺寸創建媒體查詢？

Answer 1

您可以在Chrome中設置任何分辨率。只需在Inspector中點擊「切換設備模式」並設置任何分辨率即可。

Answer 2

在Chrome開發者工具中，您可以使用use Device Mode來模擬任何分辨率，而不僅僅是移動斷點。

Answer 3

如果您使用的是谷歌瀏覽器，您可以打開網絡檢查器Ctrl-Shift-I，然後使用Ctrl-Shift-M切換設備模式。它主要用於較小的設備，但您應該能夠在屏幕頂部出現的菜單中選擇「響應」，然後輸入您希望的任何分辨率以及縮放級別，以便您可以查看它在你的屏幕上，儘管縮放。

Answer 4

如果您使用的是Safari，您可以相對容易地做到這一點。

如果你不使用Safari，你可能應該得到它，至少在網站測試。正如您在步驟6中看到的，Safari擁有許多非常有用的開發工具（即禁用JS，禁用CSS等）。

下面是一些說明與圖片！

---

1. 轉至Safari瀏覽器菜單（左上角）。
2. 在該菜單上點擊首選項，這應該打開一個彈出框。

---

在彈出框，點擊高級標籤。

在該選項卡的最底部，您應該看到一個複選框，其中顯示菜單欄中的顯示顯影菜單，然後選中該框。

---

現在加載你的網站在Safari。

---

當你的網站加載（在這個例子中我使用SO），單擊開發下拉菜單。

點擊進入響應式設計模式，現在將在比瀏覽器窗口更小的窗口中顯示您的網站。

---

在該窗口中，點擊窗口上的最左邊看的東西上。

這個小窗口的四邊都有小灰條，如果你拖動這些灰條，你可以隨意調整大小。作爲一個側面說明，當你拖動灰色條（如步驟9所示）時，你應該看到寬度和高度分辨率（像素）的變化（見下面的屏幕截圖），這是非常有用的（我全部使用它時間），因爲它可以告訴你網站中斷時的確切分辨率（像素）。附：你可以去任何屏幕分辨率 - 無論大小，你想用這個工具，這真的很酷！ （我已經做了2500×1500，100×100等）

---

希望這可以幫助你！