Microsoft Surface Pro 3和Surface Pro 4的媒體查詢

Question

爲Surface Pro 3編寫媒體查詢的最佳方式3 & 4？在風景&肖像視圖？

Answer 1

最好的辦法不是爲特定設備編寫媒體查詢，而是根據設計中的邏輯位置來確定邏輯位置，以便相應地摺疊元素或將其拆分出來，以便爲任何寬度的設備進行計算。

請參見本文的詳細信息：Google Developers—How to Choose Breakpoints

在實踐中，你提到的兩個設備的分辨率是2160x1440（表面臨3），2736x1824（表面臨4）。因此，與其爲媒體查詢設置這四個斷點，一個合理的方法是設計「大於2000像素」，「1200像素和2000像素之間」以及「1200像素以下」 - 處理您在景觀中提到的兩個設備的第一條規則模式（也處理常見的桌面分辨率），第二條規則處理縱向模式（和許多其他常見的便攜式設備）的兩個設備，以及所有尺寸的最後規則處理設備在1200像素以下。

這只是解決問題的一種方法，我建議您更仔細地研究響應式設計和斷點選擇背後的常見理論。