设备的通用媒体查询

Question

我正在寻找一个通用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) { }

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

由于

Answer 1

使用媒体查询的最佳方式，如Marcos所说，是使用分辨率。您的第一个代码@media only screen and (max-width: 768px) { }将定位所有屏幕分辨率最高为768px的设备。因此，如果您的手机具有640px的分辨率，则会影响它，如果您的手机具有更高的分辨率768px，则您在{}中输入的代码将被忽略。通常这用于制作响应式设计，并且您可以为不同的设备使用不同分辨率的查询（您可以轻松地在线查找最常见的查询）。

希望它有所帮助。