javascript - 当窗口大小改变时如何删除和获取元素

Question

像Twitter一样，当窗口大小发生变化时如何删除和获取元素？

我无法理解当窗口大小为 133% 时 Twitter 如何从 html 中删除正确的小部件，如果我改回默认窗口大小 100%，则再次将小部件代码恢复为 html!

我可以将其从 html 中删除，但无法再次将其返回。

Answer 1

您可以根据视口(viewport)宽度使用媒体查询。

媒体查询示例

确保将其放入 HTML 中:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS:

@media (max-width: 500px) {
    .element {
        display: block;
    }
}    
@media (min-width: 500px) and (max-width: 1000px) {
    .element {
        display: none;
    }
}