Microsoft Surface Pro 3和Surface Pro 4的媒体查询

Question

为Surface Pro 3和4编写媒体查询的最佳方式是什么？在横向和纵向视图中？

Answer 1

最好的方法是根本不为特定设备编写媒体查询，而是确定设计中的逻辑位置，以便相应地折叠或拆分元素，以考虑任何宽度的设备。

有关更多信息，请参阅本文：Google Developers—How to Choose Breakpoints

实际上，你提到的这两个设备的分辨率是2160x1440 (Surface Pro 3)和2736x1824 (Surface Pro 4)。因此，与其为媒体查询设置这四个断点，一种逻辑方法是设计“大于2000px”、“介于1200px和2000px之间”和“低于1200px”的-the第一个规则处理您在横向模式中提到的两个设备(也处理普通桌面分辨率)，第二个规则处理纵向模式下的两个设备(以及许多其他常见的便携式设备)，最后一个规则处理所有尺寸在1200px以下的设备。

这只是解决问题的一种方法，我建议您更仔细地研究响应式设计和断点选择背后的常见理论。