web-dev-qa-db-ja.com

Twitter Bootstrap IE8以前ではレスポンシブレイアウトが機能しません

Twitter bootstrapを使用してサイトを開発しましたが、IE8以下のすべてのIEブラウザーでレスポンシブレイアウト部分が壊れているようです。これらのブラウザではサポートされていないだけですか？

csstwitter-bootstrapcss3internet-explorer-8media-queries
56
medium

サポート@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を使用していますが、これはすごいです！お役に立てれば！ :)

33
Praveen Kumar Purushothaman

パフォーマンスを向上させたい場合で、構造が複雑すぎない場合。

試すことができます Respond.JS

著者から：

これが唯一のCSS3 Media Queryポリフィルスクリプトではありません。しかし、それはいまいましい最速かもしれません。

より堅牢なCSS3 Media Queryサポートをお探しの場合は、 http://code.google.com/p/css3-mediaqueries-js/ をご覧ください。テストでは、複雑なレスポンシブデザイン（ファイルサイズとパフォーマンスの両方）をレンダリングするときに、スクリプトが著しく遅いことがわかりましたが、実際にはこのスクリプトよりも多くのメディアクエリ機能をサポートしています。著者への大きな帽子のヒント！ :)

53
maxisam

これらを機能させるために行った手順は次のとおりです。

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宣言を削除する必要があります。

2
Rimian

このフォーラムの投稿をすべてお読みください 。

IEとTwitter Bootstrapの間の課題を非常に明確に説明します。実際に機能するソリューションも提供します。

引用：

ここでの問題は、 http://Twitter.github.com/bootstrap/ のような公式ページでは、IE7を含むすべてのブラウザーで動作すると主張していることです。これは理論的には可能ですが、レスポンシブに開発するときは、特定の心の周りで設計および開発する必要があります。

0
Chris

上記のすべての方法を試しましたが、動作は非常に遅いです。次のアプローチを提供します。 @mediaを含むcssファイルを分解し、各ルールを個別のファイルに挿入する必要があります。次に、ブラウザの画面幅に応じて、各ファイルを条件付きでアップロードする必要があります。このアクションはすべて、スクリプトcload.jsを実行します。 cload.jsをダウンロードし、使用方法をお読みください here

0
Sergey Onishchenko