如何使用媒体查询禁用 HTML 的一部分？

Question

我正在尝试禁用我的 HTML 的一部分，此代码：

<div class="right">

在达到特定屏幕尺寸时使用媒体查询，但我不确定如何操作。有什么建议吗？

谢谢

Answer 1

如果禁用是指 "disappear"。然后，您可以使用媒体查询通过将 display 属性设置为 none 来实现这一点。像这样：

/* A bit of color  */

.right {
  height: 200px;
  background-color: crimson;
}


/* Hide the <div> with class "right" when the screen width is 600 pixels or lower */

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

<div class="right"></div>

提示：单击 "Run code snippet"，然后单击 "full page" 并调整浏览器屏幕的大小，直到它消失。

了解有关媒体查询的更多信息here。

如何使用媒体查询禁用 HTML 的一部分？

How to disable a part of HTML with media queries?

html

css

media-queries