设备的通用媒体查询答案

【问题标题】：Generic media queries for devices设备的通用媒体查询
【发布时间】：2016-04-14 20:04:30
【问题描述】：

我正在寻找一个通用 CSS 媒体查询列表，以匹配手机（纵向和横向）、平板电脑（纵向和横向）和桌面。我发现了许多带有一些通用媒体查询的帖子，但它们通常是不同的，也许我不理解它们。

例如，以下查询：

@media only screen and (max-width: 768px) { }

它是否匹配所有手机（纵向和横向）和平板电脑纵向？还是什么？

我还找到了其他示例，如下所示：

/* mobile */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* tablet */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }

和

/* mobile */
@media screen and (max-width:767px) { }
/* tablet */
@media screen and (max-width:1024px) { }

前面的哪些查询是正确匹配手机（纵向和横向）和平板电脑（纵向和横向）的？

谢谢

【问题讨论】：

第一个和最后一个代码将适用于任何符合 max-width 属性的设备和桌面，无论它是否是移动设备。第二个示例仅适用于两种分辨率之间的设备，但即使与分辨率匹配，也不适用于桌面。我认为更好的选择始终是目标分辨率，而不是设备，通过这种模式，您正在制作响应式网页设计。如果您针对的是设备而不是分辨率，那不是响应式的，而是移动版本。
如果您担心方向，可以尝试使用orientation 功能。这是上面的w3 docs。

标签： css media-queries

【解决方案1】：

使用媒体查询的最佳方式，就像 Marcos 所说的那样，就是使用分辨率。您的第一个代码@media only screen and (max-width: 768px) { } 将针对所有最大屏幕分辨率为 768 像素的设备。因此，如果您的手机分辨率为 640 像素，则会对其产生影响，如果您的手机分辨率为 768 像素，则您在 {} 中输入的代码将被忽略。通常这用于进行响应式设计，并且您针对不同的设备使用不同分辨率的查询（您可以轻松地在网上找到最常见的查询）。

希望对你有帮助。

【讨论】：