Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор

Media queries адаптивная верстка

Привет, продолжаем разбор адаптивной верстки и сегодня пора поговорить о таком понятии, как media queries. Что это такое и где его применять мы и разберем в сегодняшнем занятии. Для понятия того, чем же таким важным есть media queries в адаптивной верстке, нам нужно вернуться в CSS2 и посмотреть на правило, которое называлось @media.

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

Тип Описание
all Все типы. Это значение используется по умолчанию.
aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld На ладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.

После ключевого слова @media идет один или несколько типов носителя, перечисленных в таблице, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил.

@media screen { /* Стиль для отображения в браузере */
    body {
     font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
     font-size: 0.9em; /* Размер шрифта */
     color: #000080; /* Цвет текста */
    }
    h1 {
     background: #faf0e6; /* Цвет фона под текстом */
     border: 2px dashed #800000; /* Рамка вокруг заголовка */
     color: #a0522d; /* Цвет текста */
     padding: 7px; /* Поля вокруг текста */
    }
}
@media print { /* Стиль для печати */
    body {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    h1, h2, p {
     color: #000; /* Черный цвет текста */
    }
   }

Как видно с примера выше первая часть стиля задана для обычного браузера указанием типа screen, а вторая часть для вывода на печать и здесь стоит уже тип print. Вы также заметили, что в таблице есть тип handheld, который подходит под мобильные устройства, ну или должен подходить?! А дело в том, что этот тип он не совершенен и не охватывает всевозможные устройства в современном мире. Вот по этой простой причине и были изменены медиа запросы в css3 и сейчас они уже немного по другому работают и задают тип, но все по порядку.

Еще немаловажным есть фактор подключения стилей к самой странице, а их можно подключить вот таким способом:

<head>
  <meta charset="utf-8">
  <title>@media</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css">
 </head>

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

Делается это следующим образом в одном документе создаются разные стили под различные разрешения экранов и каждый тип записывается после предыдущего типа стилей, на примере это выглядит вот так:

/* for 480px or less */
@media screen and (max-width: 480px) {
	.parkNews li {
		display:block;
		width:auto;
		padding-right:0 !important;
		padding-bottom:20px;
	}
	h1 {
		text-align:center;
		font-size:2.42857em;
	}
}
/* for 768px or less */
@media screen and (max-width: 768px) {
	.birchNews {
		float:none;
		width:auto;
	}
	.ourPark {
		margin-left:0;
	}
	.mainContent {
		float:none;
		width:auto;
	}
}

Если вы внимательно смотрели на пример выше, то заметили, что идет медиа правило, потом берутся фигурные скобки, а уже внутри идут полноценные записи стилей.

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

В css3 немного изменился принцип доступных записей типов устройства, мы можем указывать размеры устройства, его ориентацию и многое другое. Также была добавлена возможность использовать логические операторы м, если, только и т.д. К примеру вот такая запись будет говорить о следующем:

@media screen and (max-width: 321px){

}

Здесь указан логический оператор и, первая часть говорит все экраны, мониторы и устройства с шириной не более 321px будут выполнять следующие правила, ну и записываем то, что нам нужно для этого типа устройств. Для полноценного ознакомления с всеми возможностями медиа запросов рекомендую перейти на сайт w3.org/TR/css3-mediaqueries и посмотреть более детально все, что там расписано по этому поводу.

Существует четыре логических оператора записи:

  • and — логический оператор и;
  • , — логический оператор или;
  • not — логический оператор нет;
  • only — логический оператор только.

Приступая к практике верстки при помощи медиа запросов

С теоретической стороной немного поработали, пора приступить к практической, давайте используем нашу заготовку с предыдущего занятия, где есть уже сетка прописанная в стилях и создадим простой каркас в html для практики, у меня это выглядит вот так:

<body>
    <div class="container">
       <div class="row">
         <div class="cols col-12">
          <h1>Заголовок второго уровня</h1>
         </div>
           <div class="cols col-4">
               <h3>Заголовок</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatum atque, eligendi libero repudiandae voluptas reprehenderit quod id culpa temporibus ratione illo unde aliquam, sit quo neque qui perferendis debitis.</p>
           </div>
           <div class="cols col-4">
               <h3>Заголовок</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatum atque, eligendi libero repudiandae voluptas reprehenderit quod id culpa temporibus ratione illo unde aliquam, sit quo neque qui perferendis debitis.</p>
           </div>
           <div class="cols col-4">
               <h3>Заголовок</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatum atque, eligendi libero repudiandae voluptas reprehenderit quod id culpa temporibus ratione illo unde aliquam, sit quo neque qui perferendis debitis.</p>
           </div>
       </div>
    </div>
</body>

Я создал заголовок первого уровня обернув его в колонку со 100% шириной, потом создал три блока, которые в свою очередь с заданной шириной при помощи класса .col-4 и получилось, то что вы видите в примере.

Стили используются с прошлого занятия, но ничего нового не произошло, как бы мы сдвигали окно браузера по ширине, а все как было, так и осталось. Дело в том, что мы не прописали правила для медиа запроса с указанием мобильного размера, давайте это сделаем в наших стилях добавив туда вот такой код:

@media screen and (max-width: 320px) {
    h1{
        color: aqua;
    }
    .container .cols.col-1,
    .container .cols.col-2,
    .container .cols.col-3,
    .container .cols.col-4,
    .container .cols.col-5,
    .container .cols.col-6,
    .container .cols.col-7,
    .container .cols.col-8,
    .container .cols.col-9,
    .container .cols.col-10,
    .container .cols.col-11,
    .container .cols.col-12 {width: 100%;}
}

Что я здесь записал, давайте разберем все поподробнее, итак самая первая строка @media screen and (max-width: 320px) — здесь говорится, что для всех экранов и размеров не выше 320px будут применены следующие стили. В самих же стилях для разнообразия сменил цвет заголовка и самое главное всем нашим столбцам задал 100% ширину, теперь не важно какой класс задан тому или иному блоку, он будет иметь 100% ширину.

Давайте сохраним наши стили и откроем получившийся результат в окне браузера сузив его до размеров мобильного устройства и вот, что получится:Медиа запросы в css3Никакой горизонтальной прокрутки, блок за блоком разве не красота? Вот такими простыми манипуляциями с медиа запросами мы добились успеха для отображения в размере мобильных устройств.

По традиции весь готовый исходный код под этой картинкой )))Исходник кода в примере

Это еще не все возможности применения и использования медиа запросов в css3, ведь можно даже при помощи after добавлять или удалять контент, блоки для их отображения или сокрытия в различных расширениях браузеров и мониторов, но об этом мы поговорим как нибудь в другом занятии. На этом наше практическое занятие по медиа запросам подошло к концу, спасибо за просмотр и всего хорошего!

← Гибкая сеткаFlexible Media →

7 Ответов в теме: Media queries адаптивная верстка

  1. mszerg says:

    Спасибо, за статью. Как раз занимаюсь оптимизацией сайта под запросы гугла о мобильной версии. Открыл для себя много нового.

  2. А вы не думали заняться созданием видео уроков на эту тему? У вас очень хорошо получается, подчеркнул много нюансов, которые собираюсь реализовать также на своем сайте.

    • Андрей says:

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

  3. Константин says:

    Недавно переделывал сайт под мобильную версию при помощи внешних стилей. Вычитал что можно использовать команду @media, попробовал и стало получатся. Но скажу честно это занимает много времени, полностью перегнать сайт под моб. вид. Я сделал часть и забросил, нужно будет вернутся к этому чуть попозже + возьму на заметку вашу информацию.

  4. Владислав says:

    Возможно ли следующее с помощью запроса: ширину блока сравнить шириной родительского блока и если соответственно она >= то выполнить стили?

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *