0

我正在使用 Modernizr、Respond.js、Bootstrap 和使用一些媒体查询编码的自定义 css 构建一个应用程序。我想禁用 IE8 的响应能力（任何低于 1024 像素的媒体查询）。无论如何我可以在 IE8 上禁用所有或选定的媒体查询，因为调整浏览器大小时样式会混乱，所以我希望只有 IE8 支持常规桌面视图。我可以通过http://getbootstrap.com/getting-started/#disable-responsive上的说明禁用引导样式，但我不知道从哪里开始禁用所有其他媒体查询。有什么建议么？

4

1 回答 1

1

我一直在寻找一种在使用首先是移动设备的 BS3 时将桌面版本交付给 IE8 的方法。我不想使用 RespondJS（有一个闪烁，而且我不想为 IE8 人群提供/处理任何尺寸的东西）。我最终使用 gulp/grunt 任务来提取桌面的相关媒体查询，并将它们添加到单独的文件中，以便与 IE 条件语句一起添加。

有一个名为node-match-media的节点库可以解决问题。此外还有一个Grunt 插件。

没有 Gulp 插件，但它很容易完成一项任务。就我而言，我只有一个 css 文件来解析媒体查询 - 根据需要进行调整。

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 回答