5

レスポンシブ デザインに取り組むときは、respond.js を使用する古いブラウザーを含め、CSS3 メディア クエリを利用します。ページ上のいくつかの要素を操作するために JavaScript/jQuery も使用する必要がある場合があります。ただし、$(window).width() を使用する場合、ブラウザーのクロムや垂直スクロールバーの存在により、その値が CSS メディア クエリで使用される値と異なることがよくあります。 JS メディア クエリとは異なるブレークポイント。

Modernizr が Modernizr.mq を使用してこの問題を軽減していることは知っていますが、それは最初から CSS メディア クエリをサポートするブラウザーでのみ機能します。つまり、一般的に IE8 以下では機能しません。また、これらの古いブラウザー (respond.js など) にメディア クエリのサポートを追加するためにポリフィルを使用する場合、Modernizr.mq は 2 つの間の競合/オーバーライドのために機能しなくなります。

私が代わりに行ったのは、ページ上の非表示の入力要素を利用し、各メディア クエリ内で CSS 幅スタイルを指定することです。次に、その幅の値を取得して次を実行するページ (およびサイズ変更) で自動的に実行される関数があります。

        if (width == "320px" ) {
            //Functions
        }

        //481px to 600px
        else if (width == "481px" ) {
            //Functions
        }

        //601px to 768px
        else if (width == "601px" ) {
            //Functions
        }

        //769px to 960px
        else if (width == "769px" ) {
            //Functions
        }

        //769 to 1024px
        else if (width == "961px" ) {
            //Functions
        }

        //1024px+
        else {
            //Functions
        }

これは基本的に、JS を CSS メディア クエリから完全に切り離して動作させ、2 つを同期させます。これは、特定の要素とその要素で変化する特定のスタイルに基づいて起動する代わりに、個々のプロジェクトのニーズに応じて、一般的なものではなく、より具体的になる可能性があります。

私の質問は、これを行う簡単な方法はありますか? 私はこれを調べて実験するのにかなりの時間を費やしましたが、これまでのところ、古いブラウザーも考慮に入れるのが最良の選択肢のようです.

4

1 に答える 1

2

PPK は、CSS と JS をペアにする良い方法を彼のブログにリストしました。これは、あなたの方法をバックアップします。

@media all and (max-width: 900px) {
// styles
}

if (document.documentElement.clientWidth < 900) {
   // scripts
}

それに関する彼の完全な投稿はここにあります。

enquire.jsプラグインもあります。

于 2013-04-12T17:29:31.367 に答える