如何使用 CSS 在响应式布局中隐藏元素？

CSS 可用于隐藏或显示页面元素。这可用于响应式网站以显示某些元素，这些元素只能与更大的屏幕尺寸进行交互以获得良好的用户体验。

媒体查询是 CSS3 中引入的技术，用于帮助设计响应式网站。媒体查询有两个部分，一个是可选的媒体类型，它有助于描述媒体查询将工作的一般设备类别。另一个是媒体功能，它描述了要显示页面的设备的特定特性。这些可以测试它们的价值，以相应地改变页面内容的行为。

这里使用的媒体类型是 screen，它与 ‘only’ 关键字一起使用，以便媒体查询只影响选定的屏幕。可以根据宽度更改媒体功能。例如，它可以与宽度媒体功能一起使用。当宽度设置为特定值(例如使用 min-width 和 max-width)时，可以修改此值以进行更改。其他支持的媒体功能可用于检查有助于响应式网站的值。

句法：

// Check if the height is at least 600px
@media only screen and (min-width: 600px) {
    .large {
        display: block;
    }
}

在此示例中，通过将“display”属性设置为“none”来隐藏元素。媒体查询包含将显示属性设置为blockExample 的类：

  

    
      
    

  

    

        Hiding elements in responsive
        layout using CSS?
    
  
    

        This is only visible on
        large devices
    
      
    

        This is only visible on
        medium and large devices
    
      
    

        This is only visible on smaller,
        medium and large devices
    

  

输出：

• 当屏幕尺寸至少为 600px 时：
  
• 当屏幕尺寸至少为 400px 时：
  
• 当屏幕尺寸至少为 100px 时：