twitter ブートストラップを使ってサイトを開発したのですが、IE8以下のすべてのIEブラウザでレスポンシブレイアウト部分が壊れているようです。これはこれらのブラウザでサポートされていないだけですか?
76916 次
6 に答える
52
パフォーマンスを向上させたい場合で、構造が複雑すぎない場合。
Respond.JSを試すことができます
著者より:
CSS3 Media Query ポリフィル スクリプトはこれだけではありません。しかし、それが最速かもしれません。
より堅牢な CSS3 Media Query のサポートをお探しの場合は、http://code.google.com/p/css3-mediaqueries-js/をご覧ください。テストでは、複雑なレスポンシブ デザインをレンダリングすると (ファイルサイズとパフォーマンスの両方で) スクリプトが著しく遅くなることがわかりましたが、実際には、このスクリプトよりもはるかに多くのメディア クエリ機能をサポートしています。著者への大きな帽子のヒント！:)
于 2012-08-03T20:13:40.793 に答える
33
@mediaIE 8 以下でサポートされているクエリについては、
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 はすでにネイティブ サポートを提供しています。
PS: 私はこのプラグインでTwitter Bootstrapを使用しています。お役に立てれば！:)
于 2012-06-12T15:32:59.910 に答える
2
これを機能させるために私が取った手順は次のとおりです。
IE8 の response.js デモ ページをご覧ください:
https://rawgithub.com/scottjehl/Respond/master/test/test.html
動作するので、response.js をベンダー/アセットまたは同様の場所にダウンロードすることで、ローカルで動作するようにします。
ローカルのブートストラップを無効にして、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 宣言も削除する必要があります。
于 2014-02-04T06:56:21.483 に答える
0
IEとTwitterBootstrapの間の課題を非常に明確に説明しています。また、実際に機能するソリューションも提供します。
引用：
ここでの問題は、 http：//twitter.github.com/bootstrap/のような公式ページでは、IE7を含むすべてのブラウザーで機能すると主張していることです。これは理論的には可能ですが、応答性の高い開発を行う場合は、特定の心構えを中心に設計および開発する必要があります。
于 2013-02-20T10:30:22.740 に答える
0
上記の方法をすべて試しましたが、うまくいきますが、とても遅いです。次のアプローチを提案します。@media を含む css ファイルを分解し、各ルールを個別のファイルに挿入する必要があります。次に、ブラウザの画面幅に応じて、各ファイルを条件付きでアップロードする必要があります。このすべてのアクションはスクリプト cload.js を実行します。cload.js をダウンロードして、ここから使用方法をお読み ください。
于 2013-02-10T08:51:24.467 に答える
-1
于 2014-01-13T16:55:51.657 に答える