#css #responsive-design #media-queries #zurb-foundation
#css #адаптивный дизайн #медиа-запросы #zurb-foundation
Вопрос:
Я изучал лучшие практики CSS media queries и нашел определение Foundation.
Как вы можете видеть, первый медиа-запрос не имеет определения минимального / максимального размера:
@экран только для мультимедиа { } /* Определение мобильных стилей */
Почему они используют этот медиа-запрос, поскольку он не определяет точку останова? Это лучшая практика или ее следует избегать?
Спасибо!
Комментарии:
1. Он нацелен только
screenна «ы» (дисплеи), а не на другие носители, такие как2. Зачем ему нужны точки останова? Это просто экран, а не, например, печать. В этих примерах они сначала работают с мобильными устройствами, поэтому затем точки останова отображаются для больших размеров экрана.
3. Спасибо за комментарии, ребята! Да, вы правы. Мне просто интересно, должен ли при разработке адаптивных веб-сайтов общий CSS (т. Е. Правила, Используемые для всех размеров экрана) находиться вне медиазапросов или внутри медиазапроса, подобного этому, используемого Foundation — медиазапроса без спецификаций размера экрана. Возможно, в данном случае это просто вопрос организации / предпочтений.
Ответ №1:
Этот конкретный медиа-запрос применяется ко всем screen s (любого размера, ориентации, соотношения сторон или плотности пикселей).
screen это тип медиа. Все, что вы помещаете в этот медиазапрос, будет применяться только screen к содержимому других файлов и не будет применяться к media_type нему.
Вот список распознанных в настоящее время значений для media_type . Большинство из них устарели. Те, которые вы должны использовать (поскольку они, вероятно, останутся)::
all(неявный, если не указан ни один)screenprintspeech
Ребята из Foundation, вероятно, должны изменить комментарий после этого запроса на более явный. Вместо /* Define mobile styles */ того, чтобы они, вероятно, должны были использоваться /* General styles, including mobile */ .
Посмотрите на структуру их медиа-запросов, и вы заметите, что это CSS-фреймворк для мобильных устройств. Например: сначала вы определяете общие стили (включая мобильные), а затем применяете исключения для все более широких экранов.
Ответ №2:
Медиа-запросы предназначены не только для точек останова. Вы можете указать, какой носитель вывода нравится screen . В этом случае нацелены только экраны отображения. Вы также можете настроить таргетинг только print на медиа или медиа с определенной ориентацией или разрешением.
См. Дополнительные сведения о медиазапросах и типах мультимедиа в MDN или w3schools.