Модернизация с помощью Respond.js

Я тщательно оцениваю наилучший способ использования Modernizr и Respond.js для гибкого дизайна и у вас есть пара вопросов для сообщества.

Во-первых, я понимаю, что при связывании Modernizr с Respond. никакие другие кодировки или тесты не требуются для поддержки медиа-запросов в IE8 и ниже. Другими словами, когда Respond.js поставляется вместе с Modernizr, мне просто нужно загрузить Modernizr в свой источник, чтобы активировать Respond.js. Правильно?

Во-вторых, вы считаете, что это самый эффективный способ добиться поддержки медиа-запросов в IE8 и ниже? По сути, я бы включил более мощный Modernizr script, чем это необходимо для браузеров, которые уже поддерживают медиа-запросы. Разве не было бы более целесообразным разделить эти два сценария и загружать только Respond.js, если не будет выполнен тест на медиа-запросы?

В-третьих, если я хотел бы отделить два сценария, как вы считаете, лучший способ загрузить Respond.js, если это необходимо? Один из вариантов заключается в использовании специального условного комментария IE для загрузки ответа. Другой вариант - использовать yepnope и Modernizr для тестирования поддержки медиа-запросов и загрузки. При необходимости ответьте. Что было бы более эффективным и безотказным.

Наконец, если я решил отделить два сценария и использовать Modernizr для загрузки Ответьте, если необходимо, я столкнулся с двумя следующими методами:

<script>
        yepnope({
    test : Modernizr.mq('(only all)'),
    nope : ['js/libs/respond.min.js']
});
</script>

ИЛИ

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

Я обнаружил, что второй сбой IE8, но ему просто нужно переписать. Какую технику вы бы порекомендовали?

Спасибо за помощь.

Ответ 1

Во-первых, я понимаю, что при связывании Modernizr с Respond. никакие другие кодировки или тесты не требуются для поддержки медиа-запросов в IE8 и ниже. Другими словами, когда Respond.js поставляется вместе с Modernizr, мне просто нужно загрузить Modernizr в свой источник, чтобы активировать Respond.js. Правильно?

Ну, вам нужны хотя бы некоторые мультимедийные запросы CSS3, чтобы вы начали. Respond.js - это просто реализация JavaScript-запросов для браузеров, которые их не поддерживают (например, IE менее 8). Просто убедитесь, что ссылка на Respond.js появляется ПОСЛЕ ваших медиа-запросов CSS3 (ссылка).

Итак, да, если у вас есть Respond.js в комплекте с Modernizr из пользовательской сборки или что-то еще, и это загружается после вашего CSS3, вы все хорошо. Кроме того, Modernizr нуждается в дополнительной настройке в вашем HTML (ссылка)

Во-вторых, вы считаете, что это самый эффективный способ добиться поддержки медиа-запросов в IE8 и ниже? По сути, я бы включил более мощный Modernizr script, чем это необходимо для браузеров, которые уже поддерживают медиа-запросы. Разве не было бы более целесообразным разделить эти два сценария и загружать только Respond.js, если не будет выполнен тест на медиа-запросы?

Modernizr не поставляется с поддержкой браузеров без медиа-запросов. Вам нужно добавить его в пользовательскую сборку. Итак, да, я считаю, что всегда полезно реагировать. Minified, библиотека добавляет чуть больше 3 килобайт, и включение этого файла в файл Modernizr не приведет к добавлению другого запроса GET. Я бы сказал, просто оставь его там, чтобы быть готовым ко всему.

В-третьих, я бы пошел по методу Modernizr. Мне нравится использовать новый материал, все, что лишний JavaScript мешает.

Ответ 2

В новую версию Respond входят некоторые функции тестирования, поэтому вам не нужны Modernizr или Yepnope!

Здесь пересмотр: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

включил window.matchMedia polyfill извне из основной функции response.js. Исходный код для этого polyfill находится здесь https://github.com/paulirish/matchMedia.js, и в том числе его готовая версия упростит обновление, и разрешить меньшее сжатие файлов для тех, кто уже включает его через Modernizr или иным образом (если это так, вы можете удалить его из Respond.js).

Кроме того, вы должны заметить, что использование yepnope.js может вызвать задержку, в которой вы видите стили не-медиа-запросов до того, как стили и применения стилей мультимедиа будут проанализированы и применены. Рекомендация заключается в том, что вы помещаете response.js в заголовок, чтобы избежать этого как можно больше, хотя, также хорошо, чтобы ваши js файлы в нижнем колонтитуле соответствовали вам.

Ответ 3

Тестирование функций может быть в более новой версии lib, например, tkane2000... Просто хотел упомянуть, что вы, вероятно, могли бы это сделать и с помощью Modernizr:

  <script>
    Modernizr.load({
    test: Modernizr.mq('only all'),
    nope: 'js/respond.min.js'
  });
  </script>

На оригинальном плакате я думаю, что неверный запрос на проверку медиаданных '(только все)'... Не должно быть круглых скобок, основанных на некоторых вещах, которые я читаю. Как только я удалил parens, response.js, кажется, включен соответствующим образом.