基础 CSS 可见性类

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 SaaS 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Visibility Class帮助我们根据屏幕大小或设备方向使网站的不同元素可见或隐藏。它还可以根据用户的浏览环境控制用户看到的元素。可见性类有各种组件，如下所述：

• 按屏幕尺寸显示：此类根据屏幕尺寸显示特定组件。该元素仅在浏览器屏幕大小满足类的条件时才会显示，否则将被隐藏。
• Hide by screen size ：此类可用于根据屏幕大小隐藏特定元素。如果浏览器屏幕满足类的条件，该元素将被隐藏，否则它将被显示。
• 方向检测：此类可用于根据方向显示不同的元素。当我们在使用网站时旋转手机屏幕时，这些类非常有用。在桌面中，方向设置为横向。

句法：

 Content 

可访问性：我们可以通过指定display 属性来隐藏元素，它的值设置为none ，但它也会从屏幕阅读器中隐藏它。但是，当屏幕阅读器可以读取元素时，还有其他隐藏元素的方法。

仅针对屏幕阅读器显示：我们只能通过向元素添加“.show-for-sr”类来使元素对屏幕阅读器可读。

句法：

 Content 

为屏幕阅读器隐藏：我们可以通过添加属性“aria-hidden=true”使元素对屏幕阅读器隐藏。这不会影响元素的外观，但会被屏幕阅读器跳过。

句法：

 Content 

粘性模式检测：在使用粘性组件时，我们可以使用可见性类在粘性组件被卡住时隐藏或显示元素。

使用类：

• hide-for-sticky：此类用于隐藏粘性组件内的元素。
• show-for-sticky：此类用于显示粘性组件内的元素。

句法：

 Content 

创建跳过线：如果网页包含大量导航和链接，则屏幕阅读器必须先阅读每个导航，然后才能阅读其他内容。这使其速度变慢并且需要花费大量时间来加载网站。这个问题可以通过在网站上添加跳转链接来解决。

IE+ 检测： Internet Explorer 的消亡不会很快到来。因此，可见性类帮助我们在所有 IE10+ 浏览器中显示或隐藏元素。

使用类：

• show-for-ie：这有助于我们为 IE 浏览器显示元素。
• hide-for-ie：这有助于我们隐藏 IE 浏览器的元素。

句法：

 Content 

暗模式检测：暗模式在现代网站中变得非常普遍。可见性类帮助我们在其类的帮助下非常轻松地在暗模式下显示或隐藏元素。

使用类：

• show-for-dark-mode：这个类帮助我们仅在暗模式下显示元素。
• hide-for-dark-mode：这个类帮助我们在暗模式下隐藏元素。

句法：

Content

我们将探索和理解所有这些概念并通过示例来实现它们。

示例 1：此示例描述了基础 CSS 可见性类。在这里，我们根据浏览器的屏幕大小显示了不同的

。

HTML

  

    
    
    
    
    
          Foundation CSS Visibility Classes
      

  

    
        GeeksforGeeks
        Foundation CSS Visibility Classes
        
            
                This is the sample div class which
                will be seen when the screen size 
                is medium or large. 
            
        
        
            
                This is the sample div class
                which will be seen when the
                screen size is large.
            
        
        
            
                This is the sample div class
                which will be seen only when the 
                screen size is large.
            
        
        
             
                This is the sample div class which 
                will be seen only when the screen 
                size is small. 
            
        
        
            
                This is the sample div class which
                will be seen only when the screen 
                size is medium. 
            
        
    
    
        $(document).foundation();
    

输出：

示例 2：此示例描述了基础 CSS 可见性类。在这里，我们根据屏幕大小显示了不同的

。

HTML

  

    
    
    
    
    Foundation CSS Visibility Classes

  

    
        
            GeeksforGeeks
        
        
            Foundation CSS Visibility Classes
        
        
             This sample text will be hidden. 
        
        
            
                This is the sample div class which will
                be seen when the screen size not medium 
                or large. 
            
        
        
            
                This is the sample div class which will 
                be seen when the screen size is not large. 
            
        
        
             
                This is the sample div class which will be
                hidden only when the screen size will be large.
            
        
        
             
                This is the sample div class which will be hidden 
                only when the screen size will be small. 
            
        
        
             
                This is the sample div class which will be hidden only
                when the screen size will be medium. 
            
        
    
    
        $(document).foundation();
    

输出：

参考： https://get.foundation/sites/docs/visibility.html