Question

我正在尝试使用@media查询来隐藏平板电脑屏幕的范围，如下所示：

@media screen and (max-width: 600px){
.tablet-screen {
    display: none;
}

但似乎没有用。有人可以纠正我，我必须使用最大宽度而不是最小宽度来隐藏跨度吗？

Answer 1

你必须同时使用两者。低于600px，它不是平板电脑，而是智能手机。

你必须说它的最小宽度：600px和最大宽度：1280px。我会让你定义自己的断点;）

演示：https://jsfiddle.net/Zetura/453gh680/

@media screen and (min-width: 600px) and (max-width: 1280px){
  .hide-tablet {
      display: none;
  }
}

Answer 2

如果您使用min-width，请将其从上到下增加。顺序很重要！

@media screen and (min-width:220px) { ..... }

@media screen and (min-width:500px) { ..... }

@media screen and (min-width:700px) { ..... }

@media screen and (min-width:1000px) { ..... }

当当前屏幕大小超过特定块时，CSS阅读器会停止读取特定块中的样式。

而且你不需要同时使用它们。

max-width正好相反，最大宽度优先。但是限制了支持的最大屏幕宽度。（为什么？ - ＆gt;就像CSS读者一样思考。）

隐藏平板电脑的跨度并在普通屏幕上显示

2 个答案: