html - 为什么我必须在我的 css 末尾写我的媒体查询。是否有任何顺序可以从大屏幕到小屏幕尺寸编写媒体查询？

Question

我对媒体查询很困惑，因为每当我应用媒体查询时，它都无法正常工作，是否有 Ant 序列将其写入 CSS 文件？

@media max-width(767px)  {body{background:red;}  }
@media max-width(992px)  {body{background:blue;}  }
@media max-width(1200px)  {body{background:#fff;}  }

有没有根据屏幕大小写的正确顺序？这样写有什么区别吗？

@media max-width(1200px)  {body{background:#fff;}  }
@media max-width(992px)  {body{background:blue;}  }
@media max-width(767px)  {body{background:red;}  }

Answer 1

您必须按照以下方式编写您的媒体。

在这里学习:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

参见此处:https://jsfiddle.net/r60xs5j7/3/

@media only screen and (max-width: 767px) {body{background:#fff;}  }
@media only screen and (max-width: 992px)  {body{background:blue;}  }
@media only screen and (min-width: 1200px)  {body{background:red;}  }

无论何时将它们放入 css 中，它们都必须工作(除了 override 的情况，您将需要使用 !important)

请参阅此处(css 结尾):https://jsfiddle.net/r60xs5j7/5/

注意!

您需要在 head 标记中使用此 meta 才能使 media query 工作:

<meta name="viewport" content="width=device-width, initial-scale=1">