@media查询设备 - 如何纵向一个CSS，景观其他？ [英] @media query device - how to portrait one css, landscape other?

问题描述

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

How can I add two different @media query css stylesheets for a device.

所以当你以肖像方式拥有它时，它会激活一个
而在横向时它激活另一个。

So that when you have it in portrait it actives one And when in landscape it activates another.

我的情况：

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

I am trying to create a page that only works in landscape (1024px), so when you have your device (In my case Ipad) in portrait (768px) it activates a css that tells you to turn your screen sideways/landscape.

我试过这个：

<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" />

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

But then it only activates the last one of them.

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

Anybody know a way to solve my problem :-) ?

推荐答案

你可以通过使用css来做到这一点媒体特色定位。这样，您可以根据屏幕方向指定样式，与屏幕大小无关。您可以在此处找到有关此媒体功能的官方w3.org定义。结合 developer.mozilla.org 这将解释它是如何工作的。

You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.

引自w3.org关于'orientation'媒体功能：

当
'高度的值时，'orientation'媒体功能为'portrait' '媒体功能大于或等于
'宽度'媒体功能的值。否则'orientation'是'landscape'。

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

developer.mozilla.org关于方向的注释/引用功能：

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

Note: This value (ie portrait or landscape) does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

---

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

---

So to recapitulate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.

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

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

Here are the representative media queries affecting portrait and landscape orientation.

 @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，景观其他？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！