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 query。

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

@media或表达式和最大宽度

1 个答案: