像谷歌新闻一样的缩放事件

Zoom event like Google news

本文关键字：一样 缩放 事件 谷歌 新闻      更新时间：2023-09-26

我必须做一些类似谷歌新闻缩放行为的东西。当我们放大两次三次时，他的左侧边栏隐藏了起来。我们该怎么做呢？我所知道的是，首先我们必须检测缩放事件。当我搜索SO并进行一些谷歌搜索时，我开始知道HTML-DOM中没有直接的缩放事件。有一些方法可以做到这一点，例如:

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

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

您可以在

CSS 中使用@media查询。例如，如果您的浏览器width是1024，则显示一个内容，但如果它更少，则不会。此代码为：

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

IE 7 和 IE 8 尚不支持它！在这种情况下，您需要使用 JavaScript 或 jQuery 来触发。试试吧。:)希望对您有所帮助！:)

在此处查看基本示例 媒体查询演示.调整浏览器宽度并查看底部。

其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);
    }
}
相关文章：