0

Modernizr、Respond.js、Bootstrap、およびいくつかのメディア クエリを使用してコード化されたカスタム CSS を使用してアプリを構築しています。IE8 での応答性を無効にしたい (1024px 未満のすべてのメディア クエリ)。ブラウザのサイズを変更するとスタイルが台無しになるため、IE8ですべてまたは選択したメディアクエリを無効にできるので、通常のデスクトップビューをIE8でのみサポートしたい. http://getbootstrap.com/getting-started/#disable-responsiveの指示に従って Bootstrap スタイルを無効にすることができましたが、他のすべてのメディア クエリを無効にするためにどこから始めればよいかわかりません。助言がありますか？

4

1 に答える 1

1

モバイルファーストであるBS3を使用しているときに、デスクトップバージョンをIE8に配信する方法を探していました。私は RespondJS を使いたくありませんでした (ちらつきがあり、IE8 の群衆に 1 つのサイズ以外を提供/処理する必要はありません)。最終的に、gulp/grunt タスクを使用してデスクトップ用の関連するメディア クエリを抽出し、それらを別のファイルに追加して、IE 条件ステートメントで追加しました。

このトリックを実行するnode-match-mediaというノード ライブラリがあります。さらに、Grunt プラグインがあります。

Gulp プラグインはありませんでしたが、簡単にタスクを作成できました。私の場合、メディア クエリを解析するための css ファイルは 1 つしかありません。必要に応じて調整します。

var tap = require('gulp-tap');
var rename = require('gulp-rename');

gulp.task('desktopify', function() {
  var matchMedia = require('node-match-media');
  matchMedia.configure({
    width: '992px', // Pretend width to force
    height: '768px', // Pretend height to force
    px_em_ratio: 16,
    always_match: []
  });
  // My original css for modern browsers
  gulp.src('./public/styles/public.css')
    .pipe(tap(function(file, t) {
      file.contents = new Buffer(matchMedia.run(file.contents.toString()));
    }))
    // Create a custom file that contains just the needed media queries
    .pipe(rename('ie8.css'))
    .pipe(gulp.dest('./public/styles'));
});

次に、私のhtmlで：

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/styles/ie8.css">    
<![endif]-->
于 2015-05-13T03:39:54.173 に答える