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

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定义.结合developer.mozilla.org上的规范,这将解释它是如何工作的.

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

当' height '媒体特征的值大于或等于 ' width '媒体特征的值时,'orientation'媒体特征是'portrait' .否则'方向'是'风景'.

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

 }