Twitter bootstrapを使用してサイトを開発しましたが、IE8以下のすべてのIEブラウザーでレスポンシブレイアウト部分が壊れているようです。これらのブラウザではサポートされていないだけですか?
サポート@media
クエリIE 8以下、チェックアウト
css3-mediaqueries-js 。
css3-mediaqueries.jsbyWouter van der Graafは、IE 5 +、Firefox 1+およびSafari 2は、CSS3メディアクエリを透過的に解析、テスト、および適用します。Firefox3.5 +、Opera 7 +、Safari 3+およびChromeは既にネイティブサポートを提供しています。
PS:このプラグインではTwitter Bootstrapを使用していますが、これはすごいです!お役に立てれば! :)
パフォーマンスを向上させたい場合で、構造が複雑すぎない場合。
試すことができます Respond.JS
著者から:
これが唯一のCSS3 Media Queryポリフィルスクリプトではありません。しかし、それはいまいましい最速かもしれません。
より堅牢なCSS3 Media Queryサポートをお探しの場合は、 http://code.google.com/p/css3-mediaqueries-js/ をご覧ください。テストでは、複雑なレスポンシブデザイン(ファイルサイズとパフォーマンスの両方)をレンダリングするときに、スクリプトが著しく遅いことがわかりましたが、実際にはこのスクリプトよりも多くのメディアクエリ機能をサポートしています。著者への大きな帽子のヒント! :)
これらを機能させるために行った手順は次のとおりです。
IE8のresponse.jsデモページをご覧ください。
https://rawgithub.com/scottjehl/Respond/master/test/test.html
Response.jsをベンダー/アセットまたは同様の場所にダウンロードすることにより、ローカルで機能するように機能します。
ローカルのbootstrapを無効にして、CSSでこれを試してください。
/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
body {
background: blue;
}
}
できます!
私はcdnを使用していたため、ローカルでダウンロードしてホストする必要がありました。
http://getbootstrap.com/getting-started/#download
だから、これらで動作します:
= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'
また、@ import宣言を削除する必要があります。
IEとTwitter Bootstrapの間の課題を非常に明確に説明します。実際に機能するソリューションも提供します。
引用:
ここでの問題は、 http://Twitter.github.com/bootstrap/ のような公式ページでは、IE7を含むすべてのブラウザーで動作すると主張していることです。これは理論的には可能ですが、レスポンシブに開発するときは、特定の心の周りで設計および開発する必要があります。
上記のすべての方法を試しましたが、動作は非常に遅いです。次のアプローチを提供します。 @mediaを含むcssファイルを分解し、各ルールを個別のファイルに挿入する必要があります。次に、ブラウザの画面幅に応じて、各ファイルを条件付きでアップロードする必要があります。このアクションはすべて、スクリプトcload.jsを実行します。 cload.jsをダウンロードし、使用方法をお読みください here