0

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

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

我试图找到谷歌新闻是如何实现它的，但并没有太大的收获。请帮帮我

4

1 回答 1

1

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

@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);
    }
}
于 2012-06-08T08:40:19.980 回答