css - @media 或表达式和最大宽度

Question

首先让我说我是一个 CSS 菜鸟。我可以坦然接受任何责备

@media (max-width: 735px) {... }
@media (min-width: 735px) {... }

@media (width: 320px) {... }

@media (width: 360px) {... }
@media (width: 375px) {... }
@media (width: 414px) {... }

我有这些东西可以让它变得敏感。我想使用 max-width 但不知道为什么失败了，但浏览器总是选择另一个 max-width 表达式并执行它所以我只是收集了手机的宽度并做了这个。

而且我还想向拥有 360px 和 320px 的人发送相同的内容是否有任何“或”表达式可能是我可以缩小它。

Answer 1

如果我从您的问题中得到正确答案，您可以添加以下媒体查询。

@media (min-width: 320px) and (max-width: 360px) {
  html { color: blue; }
}

我建议使用不同的方法，使用媒体查询移动优先或桌面优先。通过这种方式，您可以简单地向很多人提出正确的布局，而无需编写异常。

移动优先

html { color: purple; }

@media (min-width: 600px) {
  html { color: black; }
}

/* And go up the road */

桌面优先

html { color: purple; }

@media (max-width: 600px) {
  html { color: black; }
} 

/* And go down the road */