| Vitalya | Дата: Понедельник, 06-Февраля-2017, 13:36:42 | Сообщение # 1 |
 Генерал_палкомник
Группа: Администраторы
Сообщений: 114
Награды: 0
Репутация: 32767
Статус: Offline
| При верстке сайтов, которые должны быть адаптированы под мобильные устройства возникает необходимость того, чтобы одни правила CSS применялись для больших мониторов, а другие для узких (мобильных устройств).
Каким образом можно решить такую задачу?
На самом деле, технология CSS имеет средства, которое позволяют применять различные стили для устройств с разной шириной экрана монитора.
Это становится возможным с помощью медиа-правил.
Синтаксис здесь следующий:
Код @media тип_устройства оператор (медиа_функция) { свойства_CSS }
Для адаптивной верстки достаточно пока использовать следующее выражение:
Код @media all and (max-width : значение_в_пикселях) {
Свойства CSS
...
}
Оно означает, что для всех устройств, у которых ширина экрана менее какого либо значения в пикселях, должны применяться правила CSS в фигурных скобках.
Давайте посмотрим на конкретном примере, каким образом работает данное правило.
Верстка макета из двух колонок, который адаптируется под мобильные устройства.
Добавим к исходному макету сайта боковую колонку.
Код <div class="container"> <h1>Шаблон двухколоночного макета страницы, адаптированного под мобильные устройства.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus! </p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus! </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p> </div> <div class="aside"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus! </p> </div>
Как адаптировать подобный шаблон под мобильные устройства?
Смысл следующий: мобильные устройства имеют очень узкую ширину экрана и размещать по горизонтали несколько блоков не имеет смысла. Все равно они будут располагаться очень криво и будет появляться горизонтальная полоса прокрутки.
Нужно добиться такого эффекта, чтобы на устройствах с небольшим экраном блоки располагались один над другим (по вертикали), но если страница будет просматриваться на устройстве с большой диагональю экрана, блоки должны отображаться по горизонтали в две колонки.
Давайте посмотрим, как этого можно добиться.
Шаг 1. Располагаем элементы по горизонтали для отображения на больших мониторах.
Для решения этой проблемы, добавляем на веб-страницу следующий код.CSS:
Код body{
font-size: 16px;
font-family: Candara, Trebuchet MS, Arial, Sans-serif;
}
.container{
width: 64%;
float: left;
margin: 25px auto;
background: #e3e3e3;
padding: 15px;
}
.aside {
float: right;
padding: 3%;
margin-top:25px;
width: 24%;
background-color: #eee;
}
По сути, мы размещаем две колонки рядом друг с другом с помощью свойства float.
При определенном значении ширины окна браузера, правая колонка «выпадает» вниз и смотрится очень не хорошо.
Было бы намного лучше, если бы правая колонка «выпала» вниз и стала занимать большую часть экрана и левая колонка также заняла бы то оставшееся пространство, которое занимала правая колонка.
Давайте посмотрим, как это можно сделать.
Шаг 2. Адаптируем макет под мобильные устройства.
Добиться подобного эффекта позволяет правило CSS @media.
Код @media all and (max-width : 768px) {
.container {
width: 94%;
padding: 3%;
}
.aside {
width: 94%;
padding: 3%;
}
}
Блоки, которые располагались в несколько колонок теперь подстраиваются под новую ширину экрана браузера и выстраиваются в столбик.
|
| |
| |
|
