带有媒体查询的设备方向[重复]答案

【问题标题】：Device orientation with media queries [duplicate]带有媒体查询的设备方向[重复]
【发布时间】：2019-09-22 06:13:07
【问题描述】：

当屏幕的最小宽度为 1025 像素以及移动设备水平旋转时，我希望将某些功能应用于页面。我正在尝试这个媒体查询，我做错了吗？

@media (min-width: 1025px) or (orientation: landscape) {...}

【问题讨论】：

抱歉问题重复了
尝试使用and 而不是or。
or 关键字目前处于草稿阶段。
使用逗号,代替or，如果其中一个为真，则将应用规则。如果两者都需要为真，请使用and
所以逗号是逻辑还是运算符？如果两个条件之一为真，我想应用规则，所以它应该是逻辑 OR

标签： html css twitter-bootstrap media-queries

【解决方案1】：

我尝试使用方向并查看以下代码 sn-p

您的代码中的主要问题是：

screen 错过了

@media only screen and (max-width: 600px) or (orientation: portrait)

对于您的代码，需要的更改是

@media screen (min-width: 1025px) or (orientation: landscape) {...}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) and (orientation: portrait){
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less and orientation is portrait, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

【讨论】：

支持社区，是的，但是当有人发布错误、格式错误、不遵循 SO 指南等的答案时，他们会被否决。你的错了，因为它与screen 丢失无关，or 还不起作用（刚刚起草）和and 强制这两个规则都是真的，这不是 OP 想要的。