<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

В предыдущей статье я рассказал о том, что такое адаптивная вёрстка, и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы. Вот о медиа-запросах в CSS мы и поговорим в этот раз.

Давайте сразу разберём пример медиа-запроса:

@media screen and (max-width: 768px) {
  body {
    font-size: 9pt;
  }
}

Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках". Чтобы лучше понять, как это работает, напишите вот такой код:

<!DOCTYPE html>
<html>
<head>
  <title>Медиа-запросы</title>
  <style>
    body {
      font-size: 15pt;
    }
    @media screen and (max-width: 768px) {
      body {
        font-size: 9pt;
      }
    }
  </style>
</head>
<body>
  <p>Текст</p>
</body>
</html>

Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px, то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS.

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

Так же есть и другие параметры, такие как min-width, который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height, отвечающие за высоту. Так же можно комбинировать разные параметры через and:

@media screen and (max-width: 768px) and (max-height: 300px) {
  body {
    font-size: 9pt;
  }
}

В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px.

Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width. Иногда ещё и min-width. И ещё раз повторяю, что есть и другие медиа-запросы в CSS, но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

pavell pavell 14.05.2014 16:38:21

Когда пишу 2 и больше медиа запроса то работает только 1. Например пишу так:\ @media screen and (max-width: 1024px) { #name{ width:300px; overflow-x: auto; } } @media screen and (max-width: 1680px) { #name{ width:1300px; overflow-x: auto; } } Но в любом случае всегда размер блока 1300px (как при размере экрана 1680px. И когда открываю окно размером 1024px то всё равно размер блока 1300px.

Ответить

alexandrdante alexandrdante 18.05.2014 20:04:33

а вы разберитесь сначала со screen,а потом вопросы задавайте. Вы своё условие то хоть поняли?) Напишите правильно запрос,и всё будет работать. Вопросы задавайте в службу поддержки,там ответят быстрее. да и 2 media - извращение,если честно)

Ответить

Strateg Strateg 18.08.2014 19:08:57

А медиа-запросы только в CSS 3 есть?

Ответить

SuperSonicFire SuperSonicFire 22.06.2016 09:41:29

Если речь идёт о кроссплатформенной вёрстке, то основным вопросом будет , наверное, такой: каково оптимальное число медиазапросов и с какими ширинами экранов, чтобы сайт корректно отображался на любых устройствах с экраном от 320 пикселей? С помощью плагина для Crome я собрал следующие ширины в пикселях: 320, 375, 480, 568, 600, 640, 667, 768, 800, 900, 960, 1024. Понятно, что под каждую ширину верстать глупо, но под какие - следует, а под какие - нет? Второй вопрос: а можно ли задать в медизапросе интервал ширин, например от 320 до 375 px? Если да, то можно минимизировать число медиазапросов, сочетая адаптивную и резииновую вёрстку.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.