基础 CSS 厨房水槽可见性类

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

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Visibility Class是一个内置的 Foundation 类，您可以直接将其添加到 HTML 代码中，从而允许您根据屏幕大小或设备方向控制页面上显示的组件。可见性类使用“ !important ”来确保它们不会被更具体的选择器覆盖。要使用 Kitchen Sink Visibility Class，只需将 Visibility 类添加到需要有条件显示的元素中。

基础 CSS 厨房水槽可见性类：

• show-for-*：此类用于根据屏幕尺寸显示元素，即适用于小、中和大屏幕尺寸的设备。
• hide-for-*：此类用于根据屏幕尺寸隐藏元素以防止渲染，即适用于小型、中型和大型屏幕尺寸的设备。
• show-for-landscape：如果设备方向是横向，则此类用于显示元素。
• show-for-portrait：如果设备方向是纵向，则此类用于显示元素。
• hide-for-landscape：此类用于在设备方向为横向时隐藏元素。
• hide-for-portrait：这个类用于 如果设备方向是纵向，则隐藏元素。
• show-for-sr：它允许 仅对屏幕阅读器保持可读/可见的元素。
• invisible ：此类可用于在渲染内容时使内容不可见。
• aria-hidden：它使元素对屏幕阅读器保持不可见/隐藏。
• show-on-focus：此类用于隐藏内容和tabindex = “0”属性以使元素可聚焦。

语法：

 Content 

笔记：

• .hide-for-small类没有特定的类，因为它只会永久隐藏元素。为此，您可以改用普通的旧.hide类。
• 这些类会自动将屏幕尺寸上的元素隐藏在类中指定的尺寸以下。例如，如果给定的类是.show-for-medium，那么该元素将在中等或更大屏幕尺寸的设备中可见，并且对于小屏幕尺寸将保持隐藏。但是，如果用户只想显示特定屏幕尺寸的元素，则可以将-only添加到类名的末尾。 （例如： .show-for-medium-only ）

示例：此示例描述了 Foundation CSS 中的 Kitchen Sink Visibility Class。当标签大小增加IE。，大小从小到介质会发生变化，相应的消息将可见，具体取决于屏幕尺寸。

HTML

 

     
    
    

 

    
        
GeeksforGeeks
        
Foundation CSS Kitchen Sink Visibility Classes
        

            This line appears on small or larger screen
        
 
 
        

            This line appears on medium screen or larger.
        
 
 
    

输出：

厨房水槽能见度等级屏幕尺寸

示例：此示例描述了 Foundation CSS 中的 Kitchen Sink Visibility Class。 When the tab orientation is changed from Potrait to Landscape, the respective messages get displayed.

HTML

 

     
    
    

 

    
        
GeeksforGeeks
        
Foundation CSS Kitchen Sink Visibility Classes
        

            You are in landscape orientation.
        
 
 
        

            You are in portrait orientation.
        
 
    

输出：

厨房水槽能见度类方向

示例：该示例说明了 Foundation CSS 中的屏幕阅读器显示。

HTML

 

     
    
    
     
      
    
    
    
    

 

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Visibility Classes
        
            This text can only be read by a screen reader.
        
 
 
         

            There's a line of text above this one,
            you just can't see it.
        
 
    
    
        $(document).foundation();
    

输出：

厨房水槽能见度等级可访问性

参考： https://get.foundation/sites/docs/kitchen-sink.html#visibility-classes