Как вставить медиа-запросов? CSS адаптивность в три этапа
Опубликованно 02.01.2018 18:13
Характеристики материалов, решение, старая головная боль управлять всеми веб-разработчик: native CSS-стили были запросы в CSS3, в зависимости от технических характеристик конкретного устройства, и плавное изменение стили при изменении размеров окна браузера.В CSS медиа-запросов: Adaptive за 5 минут
Простыми словами, учителя — это конструкция, которая позволяет решать в зависимости от конкретных условий, какие стили использовать на одной странице. Например, если ширина окна браузера больше 1024px, мы показываем полное меню, растягивающееся по всей ширине страницы, а если меньше 1024px — быть скрытым (например, используя свойство display: none;) и показываем их вместо этого на кнопку "гамбургер-меню", нажав на Воглер изящно списка (display: block;)
Итак, самый простой CSS media Query будет выглядеть следующим образом:
.menu { display: block; }.Бургер-menu { display: none; }
@media all and (max-width: 1024px) {
.menu { display: none; }.Бургер-menu { display: block; }
}
Дословно можно прочитать так: мы покажем все стандартные меню и скрыть «гамбургер-меню», но, если ширина окна браузера означает меньше 1024 пикселей (max-width: 1024px «до максимальной ширины 1024px»), то мы будем скрывать старое меню и показать новое. Характеристики в учителя бойню действовать. Это работает как при открытии страницы с телефона или планшета, и при уменьшении окна браузера, если мы будем атаковать его в окно, однако после него одна из сторон и ваше объявление увидели и думали, тем самым увеличивая его размер.
Примерно так запрос может выглядеть в редакторе:
Если вам достаточно краткого обзора учителя в CSS, тогда вы можете безопасно практиковать и проверить их действие на собственном сайте, нажав на него CSS media queries. Мобильные устройства также легко распознать свои новые стили, если вы не забывайте указывать мета-тег viewport, который мы рассмотрим далее. Однако мы рекомендуем сделать подробнее ознакомиться с их характеристиками, узнайте больше о браузерная поддержка, проверка технологии mobile first и desktop first.Поддержка учителя
Возможно, этот вопрос является ключевым для тех, кто серьезно думает о посетителях вашего сайта и стремится сделать его максимально доступным для всех. К счастью, уже поддерживает медиазапросы достаточно хорошо и отлично работают в современных браузерах, начиная с проблемных Safari 4 и Internet Explorer 9. Чтобы поддержать, если вы действительно Internet Explorer 8, вы можете на странице популярный скрипт respond.js или css3-mediaqueries.js.
Установить правильный media CSS для мобильных
Чтобы все работало, как надо, важно не забывать, что в заголовке тег <head> документа viewport. Это происходит следующим образом:
<meta name="viewport" content="width=device-width, initial-scale=1">
Итак, на экранах мобильных устройств с высокой плотностью пикселей устанавливается правильное соотношение между в CSS и реального количества пикселей, и ваш сайт будет масштабироваться. И больше не вопрос, почему не работает, при media язык CSS. Элегантный Адаптивность
Главная задача учителя — сделать ваш сайт адаптивным, т. е. «научить» автоматически адаптироваться под любые форматы и размеры экрана. Для этого существует два способа.
Аннотации CSS media-запросов определенных ключевых точек, среди которых чаще всего ссылается на популярных устройствах. Например, самый простой вариант: 320px - телефоны, 768px - планшеты, 1024px и выше — ноутбуков и персональных Компьютеров. И на каждый из этих пунктов фиксированные размеры блоков (а также все остальные объекты, такие как видео или фото) изменить.
Второй вариант — плавный, «резиновые» переход между несколькими точками, выбрав элементы страницы не жесткие размеры в пикселях и размер в процентах. В этом случае, например, на 1024px и выше блока меню 50% страницы будет занимать, плавно уменьшаться вместе с размером окна браузера до 768px, а затем - растянуть на 100% области просмотра.
Также стоит по технологии mobile и desktop first first упомянуть, отличающиеся подход в построении запросов. В первом случае сначала мы опишем правила для всех устройств, включая ноутбуки и персональные Компьютеры, и постепенно после реконструкции сайта и удалить ненужные элементы на странице. Во втором — сначала мы готовим макет сайта для мобильных устройств, то при расширении окна браузера и появление свободного места остаточное содержание укладывают в них.Трюк от мастера: введите нужные media правил css в теге link!
Мало кто знает, но не обязательно писать запросы прямо в CSS-стилях, вы можете непосредственно подключить файл, прямо в теге <link>. Файл подключения будет в зависимости от того, является ли страница критерии, которые в свойстве медиа. Подобным образом можно также импортировать стили из других файлов с @import.
В заключение следует отметить, что многие популярные библиотеки, которые содержат при разработке сайтов, учителя встроенные аналоги. Они отвергают не стоит. Например, Bootstrap можно прописать в HTML-коде-классы, с помощью которых блоки будут автоматически адаптироваться при изменении размера экрана, но они будут не в состоянии гибко контролировать этот процесс, и сайт всегда жестко разделена на 12 колонок. Ведь только с их помощью вы можете создать сайт, который максимально гибко на любом устройстве при этом полностью под их контролем.
Категория: Интернет
