Question

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

Answer 1

我正在寻找一种方法，在使用首先移动的BS3时，将桌面版本传送到IE8。我不想使用RespondJS（有一个闪烁加上我不关心提供/处理IE8人群的一个大小除外）。我最终使用gulp / grunt任务来提取桌面的相关媒体查询，并将它们添加到一个单独的文件中，以便用IE条件语句添加。

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

没有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]-->

如何使用Modernizr＆amp; amp;中禁用IE 8的响应性？ Respond.JS

1 个答案: