【问题标题】:Tachyons - how to display none for landscape screenTachyons - 如何在横向屏幕上不显示任何内容
【发布时间】:2018-10-07 02:13:25
【问题描述】:

我正在使用http://tachyons.io/ 并有一个图标。我只想在小型设备上显示该图标,但当它的横向模式也显示在小型设备上时。由于纵向的屏幕尺寸小于 480 像素,但如果我旋转,它在横向模式下超过 480 像素,这使得它按照 Tachyons 的“中等”尺寸。

我该如何处理这种情况?

我的场景示例:仅在小型设备上显示图标,在中型和大型设备上隐藏图标,在横向模式下 - 在小型设备上显示图标或设置可接受的显示宽度范围。

<div className="dn-ns"> 这意味着除了小型设备外,什么都不显示。

【问题讨论】:

    标签: javascript css media-queries tachyons-css


    【解决方案1】:

    听起来您应该使用“dn-l”,因为您只想在大屏幕上隐藏它。中小屏幕应该都能显示出来。

    <div class="dn-l"></div>
    

    希望这会有所帮助!


    对于它的价值,我相信“类”是 HTML 属性定义的首选。

    "className" 是 used in JSX for several reasons 并且对于使用其他语言(如 JS)操作 DOM 很有用。

    classList[.add() .toggle(), .remove()] 对于快子也变得超级有用!

    document.getElementById('element-id').className = ''
    document.getElementById('element-id').classList.add('' [,])
    

    参考: MDN className MDN classList

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多