0

私は自分のサイトをさまざまなデバイス（タブレット/モバイルなど）に対してより応答性の高いものにしています。最後のスタイルシートが有効なクロスブラウザーの「キャッチオール」である場合、さまざまなレイアウト幅のガイドとして以下を使用するかどうか疑問に思います。より具体的にはIE5/6/7。古いブラウザがすべてのシートを無視し、最後のシートだけを含めるかどうかを誰かが知っていますか？

<link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" href="medium.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width: 1025px)" href="large.css" type="text/css" rel="stylesheet">

また

@media only screen and (max-device-width: 480px) { /* CSS */ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { /* CSS */ }
@media only screen and (min-device-width: 1025px) { /* CSS */ }
4

1 に答える 1

0

IE固有のスタイルシートの使用を検討している場合は、条件付きコメントを使用してください。

あなたの場合、それは次のように行うことができます：

<!--[if IE 5]><link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if IE 6]><link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if IE 7]><link media="only screen and (max-device-width: 480px)" href="medium.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if GT IE 7]><link media="only screen and (max-device-width: 480px)" href="large.css" type= "text/css" rel="stylesheet"><![endif]-->

古いブラウザのクエリを実装したい場合@mediaは、同じブラウザのJavaScriptフォールバックが多数あります。

  1. css3-mediaqueries-js

    Wouter van der Graafによるcss3-mediaqueries.jsは、IE 5以降、Firefox 1以降、Safari 2でCSS3メディアクエリを透過的に解析、テスト、適用するためのJavaScriptライブラリです。Firefox 3.5以降、Opera 7以降、Safari 3以降、Chromeはすでにネイティブサポートを提供しています。

    GoogleCodeで入手してください。

  2. Adapt.js-アダプティブCSS

    Adapt.jsは、ブラウザがページをレンダリングする前にロードするCSSファイルを決定する軽量（848バイトの縮小）JavaScriptファイルです。ブラウザが傾いたりサイズ変更されたりした場合、Adapt.jsは単にその幅をチェックし、必要なときに必要なCSSのみを提供します。

    GitHubで入手してください。

  3. Enquire.js –JavaScriptでのメディアクエリコールバック

    Enquire.jsは、メディアクエリを処理するための軽量で純粋なJavaScriptライブラリです。GZIPで縮小した場合は1kb未満であり、依存関係はまったくありません。うん、あなたはその権利を読んだ-依存関係はなく、jQueryさえも！ネイティブ実装なしでブラウザをサポートしたい場合は、ほとんどの場合、matchMediaポリフィルを提供する必要があります。

    GitHubで入手してください。

于 2012-10-06T01:42:37.833 に答える