gpt4 book ai didi

html - @media query device - 如何肖像一个CSS,其他风景?

转载 作者:太空宇宙 更新时间:2023-11-04 14:03:29 25 4
gpt4 key购买 nike

如何为设备添加两个不同的@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" />

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

有人知道解决我的问题的方法 :-) 吗?

最佳答案

您可以使用 css 媒体功能“方向”来做到这一点。这样您就可以根据屏幕方向指定样式,与屏幕尺寸无关。您可以找到有关此媒体功能的官方 w3.org 定义 here .结合 developer.mozilla.org 上的规范这将解释它是如何工作的。


引自 w3.org 关于“方向”媒体功能:

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.


因此,概括地说,触发纵向或横向媒体查询的实际上不是屏幕方向。但是它是屏幕的高度和宽度之间的比例!因此,在非移动/触觉设备上使用“方向功能”也很有意义,因此我添加了一个小演示来展示这些媒体查询的行为。

JSFIDDLE DEMO (尝试调整视口(viewport)大小)

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

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

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

}

关于html - @media query device - 如何肖像一个CSS,其他风景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20597262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com