Как я могу отключить отзывчивость в IE 8, используя Modernizr & Respond.JS
Я создаю приложение, используя Modernizr, Respond.js, Bootstrap и пользовательские CSS, закодированные с использованием некоторых медиа-запросов. Я хочу отключить отзывчивость на IE8 (любые медиа запросы под 1024px). Есть ли в любом случае, я могу отключить все или выбранные медиа-запросы в IE8, потому что стиль не работает при изменении размера браузера, поэтому я хочу, чтобы обычное представление рабочего стола поддерживается только в IE8. Мне удалось отключить стили Bootstrap по инструкциям на http://getbootstrap.com/getting-started/, но я не знаю, с чего начать, чтобы отключить все остальные медиазапросы. Какие-либо предложения?
1 ответ
Я искал способ просто доставить версию для настольного компьютера в IE8 при использовании BS3, который является мобильным в первую очередь. Я не хотел использовать 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]-->