2012-03-14 6 views
0

今や12年後、世界中のすべてがCSS3のメディアクエリとレスポンシブなデザインのバンドワゴンに飛び込んでいるときに問題が残っています。JavaScriptからのCSS3メディアクエリへのアクセス

1は、メディアクエリは、HTMLコード内

  • 存在するJavaScriptから知ることができる方法:これは通過する単純な要素である必要がありますが、よりスマートな方法がありますか?

  • 効果(クエリが真と評価)

...あなたはJavascriptのコードでは、モバイル、タブレットなどをサポートするために、特別なコードパスを追加できるように?最終的には、関数isMobile()を作成し、それを小さな画面のプロパティに特有の特定のアクションのフラグとして使用することができます。

+0

'document.styleSheets [i] .media [j]' – kirilloid

答えて

2

興味のあるメディアクエリごとに、CSSから既知のスタイルを取得する特定のオブジェクトをページに含めることができます。そのスタイルをオブジェクトから読み取ってgetComputedStyle()とし、それに割り当てられた内容を確認して、どのメディアクエリに優先順位があるかを知ることができます。

+0

「見えない」スタイルのアイデアヒントを使用することができます。 ?レイアウトには影響しませんが、getComputedStyles()で読み込み可能になるスタイルはありますか? –

+1

絶対配置されたdivを 'left:-1000px'で使うことができます。それは 'position:absolute'なので、ページのレイアウトには影響しません。それは 'left:1000px'なので、表示されず、スクロールバーも発生しません。次に、メディアクエリルールでCSSの幅を設定し、getComputedStyles()でその幅を読み取ることができます。 jQueryは、このトリックを使用して、ブラウザーによってレイアウトされたものが必要な場合は表示されないものを計算します。 – jfriend00

関連する問題