Web-Development. Frontend. CSS 4.

Share This Post

Share on facebook
Share on whatsapp
Share on twitter
Share on email
Share on vk

Frontend. CSS. Медиа-запросы.

Всем привет друзья!

Сегодня мы поговорим с вами о такой вещи, как медиа-запросы.

С данным понятием вы должны познакомиться, как можно раньше, ибо адаптивность — это наше все!

Если вспомнить ранние времена, когда веб-разработка, только только набирала обороты. Можно догадаться, что доля телефонов на рынке была ничтожно мала, по сути 0%. А на данный момент смартфоны заполонили рынок, и мы можем заметить такую тенденцию, что сайты гораздо чаще посещают на переносных девайсах. 

Как вы уже знаете страницы отображаются по разному на разных девайсах, например: 

Как видите, на ноутбуке и стационарном пк сайт отображается в полном размере, а вот дальше уже, идет то, что мы называем «адаптивностью».

То есть, с помощью «адаптивностью» мы подразумеваем то, как сайт ведет себя на разных размерах экрана.

На сегодняшний день, для адаптивности веб страниц используются такие технологии, как: CSS FLEXBOX, CSS GRID вместе с медиа запросами. Как раз таки про медиа-запросы мы поговорим прямо сейчас.

Помимо этого, есть полу-готовые решения, такие как, bootstrap, materialize. Насчет этого мы поговорим в следующих уроках.

И так, медиа-запросы! Что же такое медиа-запросы?

Медиа-запросы — позволяют сделать из одного сайта несколько версий дизайна в зависимости от характеристик устройства, на котором осуществляет просмотр. К примеру, на мобильных устройствах экраны небольшие, а значит для них лучше использовать резиновую или блочную верстку, чтобы повысить читабельность.

Чаще всего с медиа-запросами работают, для того чтобы сайт изменял свой вид, при изменении ширины (width).

Тип устройства может принимать следующие значения:

  • all — для всех типов устройств (по умолчанию используется это значение)
  • braille — для устройств Брайля (для чтения слепыми людьми)
  • embossed — для принтеров Брайля
  • handheld — для смартфонов или портативных устройств
  • print — для принтеров
  • projection — для проекторов
  • screen — для экранов компьютеров, планшетов, смартфонов и т.д.
  • speech — для речевых браузеров
  • tty — для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
  • tv — для телеэкранов

Синтаксис медиа-запросов выглядит вот так:

@media тип_устройства and|not|only (медиа_особенности){ … Описание стилей … }

Взглянем на этот пример, когда мы хотим, чтобы шрифт уменьшался когда мы будем уменьшать размер экрана.

.block {

    font-size:80px;

}

@media (max-width:600px) {

    .block {

        font-size:20px;

    }

}

Как вы видите в данном примере можно заметить применение медиа запросов. 

Во-первых, вы скорее всего заметили, что мы не задали тип устройства. Дело в том что, если не вписывать значение, то у нас значение по умолчанию all. То есть, для всех устройств.

Во-вторых, как вы видите мы заранее задали, что размер нашего шрифта равен 80px, но благодаря медиа-запросам мы смогли задать 2 значения. 1-е для экранов больше 600px они имеют размер 80px, остальные экраны, которые имеют разрешение меньше чем 600px (как и написано в условии максимально 600px). Девайсы с данным типом разрешения будут иметь шрифт 20px.

Благодаря этому примеру мы можем отчетливо понять, что такое медиа запросы. 

Но! Не стоит запутываться! Медиа-запросы нам нужны не только для того чтобы, менять шрифты и размеры чего либо. С помощью данного очень полезного свойства, мы сможем буквально переделать сайт полностью. 

Предлагаю вам попрактиковаться с использованием данного свойства, ведь в будущем вы будете испоьзовать его очень часто.

Вот несколько примеров использования медиа-запросов: 

В данном примере, все очень отчетливо понятно.

Как вы видите на больших экранах сайдбар, и основной контент занимают свои места правильно.

А вот на планшетах (на экранах с более меньшим разрешением) сайдбар уходит вверх, и занимает 100% места.

На самом деле, у медиа-запросов чуть более большая территория изучения. Но на первых парах вам этого хватит с лихвой. 

На этом все! Покеда!

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Uncategorized

Теория Зон Обучения (Сеннингер, 2000)

Теория Зон Обучения (Сеннингер, 2000) Изучение чего-то нового похоже на начало нового путешествия. Вы должны оставить позади то, что удобно и привычно, чтобы учиться и

AzatAI Team

Вирусы. Распространение.

Что такое вирус? Вирус — можно назвать тайным агентом, который проникает в живые клетки организма и размножается т.е. он не может размножаться сам по себе

Do You Want To Boost Your Business?

drop us a line and keep in touch

Follow Us

© 2019 AzatAI All Rights Reserved