Question

如何为设备添加两个不同的@media查询css样式表。

因此，当你拥有它时，它会激活一个而在景观中它会激活另一个。

我的情况：

我正在尝试创建一个仅适用于横向（1024px）的页面，所以当你的设备（在我的情况下是Ipad）中以肖像（768px）显示它会激活一个css，告诉你将屏幕转向横向/横向

我试过了：

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

但是它只激活了最后一个。

任何人都知道解决问题的方法:-)？

Answer 1

您可以使用css媒体功能“orientation”来完成此操作。这样，您可以根据屏幕方向指定样式，与屏幕大小无关。您可以找到有关此媒体功能的官方w3.org定义here。结合developer.mozilla.org上的规范，这将解释它是如何工作的。

在w3.org上引用“方向”媒体功能：

'orientation'媒体功能是'肖像'时的值 “高度”媒体功能大于或等于的值 '宽度'媒体功能。否则'方向'就是'风景'。

developer.mozilla.org关于“方向”功能的说明/引用：

注意：此值（即纵向或横向） 不与实际的设备方向相对应。在大多数设备上以纵向打开软键盘将会导致视口变得比它高，从而导致浏览器使用横向样式而不是纵向。

总而言之，实际上并不是触发纵向或横向媒体查询的屏幕方向。然而，它是屏幕的高度和宽度之间的比例！因此，使用非移动/触觉设备的“定向功能”也是有意义的，因此我添加了一个小型演示来显示这些媒体查询的行为。

JSFIDDLE DEMO （尝试调整视图端口大小）

以下是影响纵向和横向的代表性媒体查询。

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*hide your main content and display message */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* show your content*/

 }

@media查询设备 - 如何纵向一个CSS，景观其他？

1 个答案: