基础 CSS 可见性类按屏幕大小隐藏

在网页设计中，有时需要根据屏幕大小来隐藏或显示某些元素。这可以用基础 CSS 可见性类来实现。下面我们来介绍一下如何根据屏幕大小隐藏元素。

CSS 可见性类

在 CSS 中，有几个类可以用来设置元素的可见性。它们分别是：

• visible: 元素可见；
• hidden: 元素隐藏，但仍占据空间；
• collapse: 用于表格元素，表格行或列被删除并合并单元格；
• initial: 设置元素为其默认初始值；
• inherit: 从父元素继承可见性。

根据屏幕大小隐藏元素

通过媒体查询可以根据屏幕大小来隐藏或显示元素。下面是一个示例代码片段：

.element {
  display: block;
}

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

上面的代码表示当屏幕宽度小于 600 像素时，元素将被隐藏，否则保持显示。

另外，如果你希望隐藏元素但不占用任何空间，可以使用 visibility 属性。设置为 hidden 时，元素会被隐藏但仍占据空间；设置为 collapse 时，则会将元素和其相邻元素折叠在一起。

.element {
  visibility: hidden;
}

@media screen and (max-width: 600px) {
  .element {
    visibility: collapse;
  }
}

总结

基础 CSS 可见性类提供了多种设置元素可见性的方式。通过使用媒体查询，可以根据屏幕大小来隐藏或显示元素。而通过 visibility 属性，可以控制元素的可见性，同时避免占用多余的空间。