如何使用媒体查询选择特定视口

Question

我正在尝试选择 767px和1024px 之间的区域。

我希望这适用于屏幕，iPad 人像，但不 iPad 风景

这些是我尝试过但没有成功的一些查询。

@media only screen and (max-device-width: 1024px) and (orientation: portrait), screen and (min-width: 767px) and (max-width: 1024px) { ... }

问题在于iPad格局属于767和1024的查询范围，因此我不知道如何排除iPad格局特定的视口。

Answer 1

怎么样：

<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:landscape)" href="landscape.css" />

然后这样做： 所以＆lt; style @media screen（max-device-width：1024px）和（orientation：portrait）{/ ** portrait /} @media screen（max-device-width：1024px）和（orientation：landscape） {/ landscape ** /}＆lt; / style＆gt;

我不确定你的意思......那些人那样做。无论哪种方式，这是另一种解决方案，因此您可以排除iPad Landscape / * iPads（风景）----------- / @media only screen 和（min-device-width：768px） 和（max-device-width：1024px） 和（方向：风景）{ / 样式* / }

/ * iPads（肖像）----------- / @media only screen 和（min-device-width：768px） 和（max-device-width：1024px） 和（方向：肖像）{ / 样式* / }