Question

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

Answer 1

媒体查询是唯一的解决方案。这是一个小提琴：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;
    }
}

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

1 个答案: