Question

我必须做出Google News的缩放行为。当我们放大两次时，他左侧边栏隐藏了。我们怎么做到这一点？我所知道的是首先我们必须检测缩放事件。当我搜索SO并进行了一些谷歌搜索时，我发现HTML-DOM中没有直接缩放事件。有一些方法可以这样做：

使用onresize事件，当我们放大或缩小时会触发两次。但现在我们如何检测它是放大还是放大。一种方法是比较onresize事件之前和之后的任何元素的维度。但那还有什么吗？

我试图找到谷歌新闻如何实现它，但没有多少胜利。请帮帮我

Answer 1

您可以在CSS中使用@media个查询。例如，如果您的浏览器width为1024，则会显示一个内容，但如果内容较少，则不显示。{1}}这个代码是：

@media (max-width: 500px) {
    .left-sidebar {
        display: none;
    }
}
@media (min-width: 500px) {
    .left-sidebar {
        display: block;
    }
}

在IE 7和IE 8中尚不支持！在这种情况下，您需要使用JavaScript或jQuery来触发。试试看。：）希望能帮助到你！：）

在此处查看基本示例Media Query Demo。调整浏览器宽度并查看底部部分。

CSS就是：

@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}

缩放事件，如谷歌新闻

1 个答案: