0

Google ニュースのズーム動作のようなものを作らなければなりません。2 3 回ズームインすると、左側のサイドバーが隠れます。どうすればそれができますか？私が知っていることは、最初にズームイベントを検出する必要があるということです。SO を検索し、グーグルで検索したところ、HTML-DOM に直接ズーム イベントが存在しないことがわかりました。次のように、いくつかの方法があります。

  1. onresizeズームインまたはズームアウトすると 2 回発生するイベントを使用します。しかし、ズームインまたはズームアウトであることをどのように検出できますか。onresize1 つの方法は、イベントの前後で任意の要素のディメンションを比較することです。しかし、それ以外に何かありますか。

Googleニュースがそれをどのように実装しているかを見つけようとしましたが、あまり勝ちませんでした。助けてください

4

1 に答える 1

1

@mediaCSS でクエリを使用できます。たとえば、ブラウザ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);
    }
}
于 2012-06-08T08:40:19.980 に答える