草庐IT

Foundation CSS 可见性

runoob 2023-04-06 原文

Foundation CSS 可见性

根据屏幕尺寸显示元素

以下类会根据设备(屏幕尺寸)来显示元素。

类 描述
.show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em )
.show-for-medium-up 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em)
.show-for-medium-only 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
.show-for-large-up 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em)
.show-for-large-only 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
.show-for-xlarge-up 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em)
.show-for-xlarge-only 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
.show-for-xxlarge-up 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em)

以下实例演示了以上所有 .show- 类的可见性。

<p class="show-for-small-only">你在小型设备上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
<p class="show-for-medium-only">你在中型设备上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
<p class="show-for-large-only">你在大型设备上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
<p class="show-for-xlarge-only">你在更大型设备上。</p>
<p class="show-for-xxlarge-up">你在超大型设备上。</p>

尝试一下 »

根据屏幕尺寸隐藏元素

以下类会根据设备(屏幕尺寸)来隐藏元素。

类 描述
.hide-for-small-only 只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em )
.hide-for-medium-up 在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em)
.hide-for-medium-only 只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)
.hide-for-large-up 在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em)
.hide-for-large-only 只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)
.hide-for-xlarge-up 在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em)
.hide-for-xlarge-only 只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间)
.hide-for-xxlarge-up 在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em) 
<p class="hide-for-small-only">你不在小型设备上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
<p class="hide-for-medium-only">你不在中型设备上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
<p class="hide-for-large-only">你不在大型设备上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>

尝试一下 »

根据屏幕方向显示元素

以下类会根据设备(屏幕尺寸)来隐藏元素。

我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示：

类 描述
.show-for-landscape 在横向时显示元素（纵向隐藏）
.show-for-portrait 在纵向时显示元素（横向隐藏）

下面实例根据使用的方向显示文本内容：

实例

<p class="show-for-landscape">文本只在横向显示。</p>
<p class="show-for-portrait">文本只在纵向显示。</p>

尝试一下 »

触屏设备的显示与隐藏

你可以根据设备是否支持触摸来显示与隐藏元素。

类 描述
.show-for-touch 在支持触屏的设备上显示(不支持的设备上隐藏)
.hide-for-touch 在支持触屏的设备上隐藏(不支持的设备上显示)

下面实例根据设备是否支持触摸来显示文本内容：

实例

<p class="show-for-touch">你的设备支持触屏。</p>
<p class="hide-for-touch">你的设备不支持触屏。</p>
尝试一下 »
FoundationCSSclassspantd

有关Foundation CSS 可见性的更多相关文章

  1. ruby - 即时确定方法的可见性 - 2

    我正在编写一个方法，它将在一个类中定义一个实例方法；类似于attr_accessor:classFoocustom_method(:foo)end我通过将custom_method函数添加到Module模块并使用define_method定义方法来实现它，效果很好。但我无法弄清楚如何考虑类(class)的可见性属性。例如，在下面的类中classFoocustom_method(:foo)privatecustom_method(:bar)end第一个生成的方法(foo)必须是公共(public)的，第二个(bar)必须是私有(private)的。我怎么做？或者，如何找到调用我的cust

  2. ruby - 是否可以动态检查方法可见性范围(私有(private)/公共(public)/ protected )？ - 2

    如thisanswer中所述，在Ruby2.1或更高版本中，此代码:classSimpleTestprivatedefine_method:foodo42endend将定义foo作为SimpleTest的私有(private)方法实例。(在Ruby2.0和更早版本中，它不会是私有(private)的。)但是，我希望做一些不那么琐碎的事情。我想定义一个类可以扩展的DSL，并希望DSL在内部定义的方法尊重调用上下文的私有(private)/protected可见性。这可能不是很清楚，所以这里有一个例子:moduleDsldefhas_a(name)define_methodnamedo42

  3. ruby-on-rails - 将配置文件模型的某些属性设置为对其他用户公开(可见)或私有(private)(不可见)的最佳方法是什么？ - 2

    我有一个Profile模型，它有很多属性，比如电子邮件、图像、年龄、地址等。最终用户可以将某些属性设为私有(private)，以便其他用户无法查看。我通过向表private_attr添加一列并将其序列化以存储哈希来解决这个问题:-{email:true,address:true,age:false}这里的属性作为具有值true的键被认为是私有(private)的，不会向除这些属性所属的用户以外的用户显示。我想知道这是解决这个问题的最好方法，还是有其他方法。提前致谢。 最佳答案 我认为您可以只序列化用户希望在数组中私有(private

  4. ruby - 通过 Nokogiri 获取可见的文本词 - 2

    我想用Nokogiri打开一个网页，提取用户在浏览器中访问该页面时看到的所有词，并分析词频。使用nokogiri从html文档中获取所有可读单词的最简单方法是什么？理想的代码片段应该是一个html页面(比如一个文件)，并给出一组来自所有类型可读元素的单个单词。(无需担心javascript或css隐藏元素并因此隐藏单词；所有设计用于显示的单词都可以。) 最佳答案 你想要Nokogiri::XML::Node#inner_text方法:require'nokogiri'require'open-uri'html=Nokogiri::H

  5. ruby - 检测类方法中的新方法可见性 - 2

    这是一个代码示例:classFoodefself.create_methoddefexample_method"foo"endendprivatecreate_methodendFoo.public_instance_methods(false)#=>[:example_method]是否可以检测到类方法create_method是从类Foo私有(private)区域调用的？在上面的示例中，该信息可用于根据调用create_method的位置将example_method设为公开或私有(private)。 最佳答案 为了确定，我仔细

  6. ruby - 一些 JS 运行后，如何让 Capybara 检查可见性？ - 2

    加载页面后，我有代码运行并根据xhr返回的数据隐藏和显示各种项目。我的集成测试看起来像这样:it"shouldnotshowtheblah"dopage.find('#blah').visible?.shouldbe_trueend当我手动转到此测试运行的上下文中的页面时，#blah不如我所料可见。我怀疑Capybara正在查看页面的初始状态(在本例中是不可见的)，评估DOM的状态并在JS运行之前测试失败。是的，我在包含的describeblock上设置了:js=>true:)任何想法将不胜感激!我希望我不必在这里故意延迟，这感觉不稳定并且会减慢速度。 最佳

  7. javascript - 如何检查滚动条是否可见？ - 2

    我想在我的网站上显示一个“转到顶部”链接。只有在垂直滚动条可见时，该链接才应该可见。我如何使用JavaScript执行此操作？谢谢 最佳答案 你可以查看elem.clientHeight值，但它也取决于css属性 关于javascript-如何检查滚动条是否可见？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/2927963/

  8. javascript - 当我们将 div 置于可见状态时，隐藏 div 中的 TinyMCE 不会显示为已启用 - 2

    我在使用tinyMCE(所见即所得编辑器)时遇到问题。我实际上是在像DIV这样的HTML元素中添加文本区域，该元素当前具有样式属性“display:none”。当我将DIV显示样式更改为可见时，tinyMCE编辑器显示为已禁用。重要说明:导致问题的设置是“auto_resize”选项。这是我打开/关闭使tinyMCE编辑器进入编辑或只读模式的唯一选项。这是我的代码:tinyMCE.init({mode:"specific_textareas",editor_selector:/(RichTextArea)/,theme:"advanced",auto_reset_designmode:

  9. javascript - 在 JQueryUI 小部件的 QUnit 测试中测试可见性 - 2

    这对其他人来说可能很明显，但我没有通过搜索找到它，所以在这里发布问题和一个可能的答案。背景:自定义JQueryUI小部件使用widgetfactory在小部件中，某些元素会根据其他数据/选项隐藏或显示。创建单元测试以验证它们是否正确显示/隐藏。我认为我的单元测试都可以在内存中创建自己的元素，类似于thisoldanswer.从这个例子中删除了实际的小部件部分:test('show/hide',1,function(){varsomecondition=true;vardiv=$('').hide();if(somecondition)div.show();equal(somecondi

  10. javascript - 将数据添加到垂直滚动文档时，如何保持前面的部分可见？ - 2

    这是无限滚动的一部分，当我们向上滚动时也有效:InitialContent111InitialContent222InitialContent333InitialContent444InitialContent555InitialContent666InitialContent777JS代码:vardataAbc='FocusShiftedHere';setTimeout(function(){$(dataAbc).prependTo("#sContainer");},3000);setTimeout(function(){$(dataAbc).prependTo("#sContain

随机推荐