@media或表达式和最大宽度

Question

让我先说我是CSS noob。我可以自由地接受任何指责

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