javascript - Tachyons - 如何在横向屏幕上显示无

标签 javascript css media-queries tachyons-css

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

我该如何处理这种情况?

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

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

最佳答案

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

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

希望这对您有所帮助!


就其值(value)而言,我认为“类”是 HTML 属性定义的首选。

“类名”是 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

关于javascript - Tachyons - 如何在横向屏幕上显示无,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48435517/

相关文章:

javascript - 使用javascript调整图像的边框宽度

javascript - 如何找出文档中最高的 z-index?

css - 在 CSS 媒体查询中实现逻辑 OR 的最有效方式

css - 将 min 和 max 与媒体查询一起使用时的 1px 间隙

html - CSS:剪刀式图像布局

macos - 在 Mac OSX 上将最小宽度设置为 320px

javascript - 在 Cordova 中禁用硬件后退按钮

javascript - 带有选择验证功能的 jQuery UI 对话框

javascript - 将元素的innerHTML设置为随机字符串

html - 重置一个元素及其子元素的所有 CSS