Где можно найти хорошие уроки по CSS @media screen?

Question

[Niko Frost]

Где можно найти хорошие уроки по CSS media screen?
В поисковике, не нашел достаточно хороших и понятных уроков.
Можете посоветовать, уроки где детально объяснено как работать с media screen?

Comments

[Сергей delphinpro]

тут www.w3.org/TR/css3-mediaqueries детально все написано :)

Answer 1

[Сергей ZSA]

Очень долго сам искал различную информацию по адаптивной вёрстке, много чего пересмотрел, но всё равно было немного боязно верстать адаптивно. Как только просто взял и попробовал - понял, что всё это нереально просто. Постараюсь объяснить, как верстать с помощью media.

Представьте, что вы верстаете обычный сайт, сразу вписывая стили в файл. Сверстали всё, отлично. Теперь создаёте ещё один файл в css и снова верстаете сайт, только при этом указываете media необходимый (zooks уже показал, как это сделать). То есть это та же вёрстка один в один, просто добавляется строчка с указанием размера экранов, а дальше делайте так, как вам удобно. Единственный нюанс - смотреть вёрстку для того или иного разрешения - инструмент в FF адаптивный дизайн. В хроме и опере тоже такая же фича есть - выставляете необходимое разрешение (к примеру в media у вас максимум 320px - выставьте разрешение в браузере 320px) всё.

Конечно надо понимать наследования и перезапись свойств в css, тогда становится ещё легче. Ну и многое зависит от вашего стиля вёрстки. Сейчас flexbox очень удобно пользоваться и при его использовании надобность достаточно большого количества дополнительных перезаписей правил в media просто отпадает.

Answer 2

[Андрей Б.]

А в чем сложности? Вроде технология простая.
Посмотрите видео по верстке адаптивных сайтов от loftblog, может поможет.

Answer 3

[zooks]

В общем изучать тут нечего. Изменение цвета фона при ширине документа меньше 300px:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

www.w3schools.com/cssref/css3_pr_mediaquery.asp - полный список значений.

Answer 4

[The Dragger]

можно просто изучить bootstrap

Comments

[Niko Frost]

Знаю, но зачем мне такие знания? Я сам хочу знать - как и почему.

[The Dragger]

Niko Frost: по ходу изучения bootstrapa вам расскажут про свойства этих Брэкпоинтов, к стати их называют брэкпоинты можете прям так загуглить брэпоинты css. Когда я тока знакомился с адаптивной версткой я сперва сам создавал 12 - колоночную грид систему.

[The Dragger]

*брейкпоинты