设备的通用媒体查询

-1

我正在寻找匹配手机（纵向和横向），平板电脑（纵向和横向）和桌面的通用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) { }

其中前面的查询是正确的正确匹配的手机（纵向和横向）和平板电脑（包括肖像和风景）？

谢谢

来源

2016-04-14 Frank

第一个和最后一个代码可以在任何适合max-width属性的设备和桌面上工作，不管它是否是移动设备都没关系。第二个示例仅适用于两种分辨率之间的设备，但不适用于桌面，即使与分辨率匹配。我认为更好的选择总是目标决议，而不是设备，通过这种模式，你正在做出响应式网页设计。如果您的目标是设备而不是解决方案，那不是响应式的，但这是移动版本。 –

如果你关注方向，你可以尝试使用'orientation'功能。这里是[w3文档]（https://www.w3.org/TR/mediaqueries-4/#orientation）。 –

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

希望它有帮助。

来源

2016-04-14 12:04:30 Aleksander

设备的通用媒体查询

回答

相关问题