CSS if else 条件，移动纵向或横向[重复]

Posted 2023-03-06

【中文标题】CSS if else 条件，移动纵向或横向[重复]

【英文标题】：CSS if else conditions, mobile portrait or landscape [duplicate]

【发布时间】：2016-12-15 07:24:08

【问题描述】：

如何使用 with-height 条件。没有javascript。

@media (calc(window-width > window-height)) 
    background-color: lightblue;

@media (calc(window-width <= window-height)) 
    background-color: lightgray;                

我想查找移动设备以检测移动设备是否旋转为纵向或横向。

【参考方案1】：

你可以使用方向约束：

@media handheld and (orientation: landscape) 
    /* applies to mobiles in landscape mode */

@media handheld and (orientation: portrait) 
    /* applies to mobiles in portrait mode */

多个规则用逗号分隔（OR），否则使用AND。

见MDN。

【讨论】：

有人可以说如何在Safary浏览器中使用类似的css代码：

@media (min-width: 150vh) .imageMap height: 100%;宽度：150vh；背景颜色：浅蓝色；

@media (max-width: 150vh) .imageMap 宽度: 100%;高度：66vw；背景颜色：浅灰色；

【参考方案2】：

您也可以通过height 使用媒体查询 -

例如-

@media screen and (max-width: 995px) , screen and (max-height: 700px) 
  ...

或者你可以使用 orientation

@media (min-width: 700px) and (orientation: landscape)  ... 

你也可以使用 with height

@media (max-height: 700px), handheld and (orientation: landscape)  ... 

我的一些朋友还发布了 MDN URL，您可以从中获取更多信息。

这个answer可能对你有用

【参考方案3】：

试试这个：

.something 
    background-color: lightblue;


@media (orientation: landscape)  
    .something 
        background-color: lightgray;
    

【参考方案4】：

MDN docs:

方向

值：风景 |肖像

媒体：视觉

接受最小/最大前缀：无

表示视口是否为横向（显示更宽 比它高）或纵向（显示器比它高） 模式。

示例

仅在纵向应用样式表：

@media all and (orientation: portrait) ...

注意：这个值确实 与实际设备方向不对应。打开软键盘 在大多数纵向设备上会导致视口 变得比高度更宽，从而导致浏览器使用 横向样式而不是纵向样式。

【参考方案5】：

你不能使用 calc 方法，因为 calc 方法是 css 属性的值而不是属性。

但您可以将媒体规则与 max-width 和 min-width 组合（粘贴宽度或高度值而不是 xxx）：

@media(max-width:xxx) and (min-width: xxx)
@media(min-width:xxx) and (max-height: xxx)

您还可以像这样使用更高级的媒体查询：

@media all and (max-width: xxx) and (min-width: xxx), (min-width: xxx) 

如果您尝试使用纵向和横向，那么您可以这样做：

/* Portrait */
@media screen and (orientation:portrait) 
    /* Portrait styles */

/* Landscape */
@media screen and (orientation:landscape) 
    /* Landscape styles */

请参考reference，这就是我们所拥有的。