html - 如果低于特定宽度则显示内容

Question

如果宽度低于特定像素，我知道如何使用 css 隐藏内容。喜欢附加到 Broser 端的 Social Logos。但我确实希望将它们隐藏起来，只要浏览器在其适当的桌面版本中显示布局，但如果它获得平板电脑/移动布局则显示它？其次，如果涉及到该解决方案，像 Kindle HD Fire 这样具有 HUGH 分辨率的新设备是否会成为问题？有没有更好的方法来避免这种情况？ 我永远无法真正理解这些响应式框架是如何做到的，所以也许有一个更“保存”的解决方案？非常感谢您的帮助。

Answer 1

媒体查询是唯一的解决方案。这是一个 fiddle :http://jsfiddle.net/4bn48vLk/

尝试改变结果部分的宽度。

HTML:

<img src="http://placehold.it/250x250" class="big" />
<img src="http://placehold.it/100x100" class="small" />

CSS:

.small {
    display: none;
}

@media (max-width:400px) {
    .small {
        display: block;
    }
    .big {
        display: none;
    }
}