В адаптивных веб-дизайнах первым всегда должно идти содержимое
Мы хотим, чтобы многие черты нашего дизайна оставались такими, как есть при отображении на разнообразных платформах и в областях просмотра (вместо того чтобы скрывать определенные части из виду с помощью выражения display: none.
Или вроде того). Однако также важно принимать во внимание порядок, в котором располагаются объекты. На данный момент, если взглянуть на очередность расположения врезки и основного содержимого в нашей разметке, понятно, что врезка всегда будет стремиться отобразиться раньше основной информации. Ясно, что для пользователя с более ограниченной областью просмотра основное содержимое должно отображаться ранее, чем врезка, ведь в противном случае он в первую очередь увидит второстепенную информацию.
Мы также могли бы (и, возможно, нам следовало бы) изменить местоположение основного содержимого, поместив его над навигационной областью. Благодаря этому для пользователей с наименьшими областями просмотра основное содержимое будет отображаться раньше, чем что-либо другое. Однако нам бы хотелось, чтобы в большинстве случаев навигационные элементы располагались вверху страницы, поэтому будет лучше, если мы просто изменим порядок расположения врезки и основного содержимого в HTML-коде: сделаем так, чтобы основное содержимое шло раньше врезки. Например, взгляните на следующий код:
<div id="sidebar">
<р>Это врезка</р>
</div>
<div id="content">
<р>Это содержимое</р>
</div>
Вместо предыдущего кода теперь у нас будет такой:
<div id="content">
<р>Это содержимое</р>
</div>
<div id="sidebar">
<p>Это врезка</p>
</div>
Несмотря на то что мы внесли изменения в разметку, в более крупных областях просмотра наша страница по-прежнему выглядит абсолютно так же, как и раньше, благодаря свойствам float:left и float:right, относящимся соответственно к врезке и основному содержимому. Однако на экране iPad основное содержимое теперь идет первым, а второстепенное (врезка) — вторым.
Итак, наша разметка структурирована в правильном порядке. Кроме того, я позаботился о добавлении и изменении дополнительных стилей, характерных для областей просмотра шириной 768 пикселов. Вот как теперь будет выглядеть соответствующий медиазапрос:
@media screen and (max-width: 768px) {
#wrapper,#header,#footer,#navigation { width: 768px; margin: 0px;
}
#logo { text-align:center;
}
#navigation { text-align: center;
Background-image: none; border-top-color: #bfbfbf; border-top-style: double; border-top-width: 4px; padding-top: 20px;
}
#navigation ul li a { background-color: #dedede; line-height: 60px; font-size: 40px;
}
#content, #sidebar { margin-top: 20px; padding-right: 10px; padding-left: 10px; width: 728px;
}
.oscarMain { margin-right: 30px; margin-top: 0px; width: 150px; height: 394px;
}
#sidebar { border-right: none; border-top: 2px solid #e8e8e8; padding-top: 20px; margin-bottom: 20px;
}
.sideBlock { width: 46%; float: left;
}
.overHyped { margin-top: 0px; margin-left: 50px;
}
}
Помните, что добавленные здесь стили начнут задействоваться, только когда речь будет идти об устройствах с областями просмотра шириной 768 пикселов или менее. А для более крупных областей просмотра они будут игнорироваться. Кроме того, поскольку эти стили идут в самом конце, они будут иметь больший приоритет в соответствующих ситуациях. Таким образом, более крупные области просмотра будут выглядеть так же, как и раньше. На устройствах с областями просмотра шириной 768 пикселов все будет выглядеть так, как показано На рисунке 2.11.
Разумеется, здесь мы не собираемся завоевывать какие-либо награды за дизайн, однако с помощью всего лишь нескольких строк CSS-кода в медиазапросе мы создали совершенно новый макет для областей просмотра с другой шириной. Как именно мы это сделали?
Страница проектируемого сайта в области просмотра шириной 768 пикселов
Прежде всего мы сбросили все области содержимого до полной ширины, указанной в медиазапросе, как показано в следующем фрагменте кода:
#wrapper,#header,#footer,#navigation { width: 768px; margin: 0px;
}
Затем нам оставалось лишь добавить стили для изменения эстетических свойств элементов. Например, приведенный далее фрагмент кода изменяет размер навигационной области, макет и фон, чтобы пользователям планшетных компьютеров (или любым пользователям с областью просмотра шириной 768 пикселов или менее) было легче выбирать тот или иной навигационный элемент:
#navigation { text-align: center; background-image: none; border-top-color: #bfbfbf; border-top-style: double; border-top-width: 4px; padding-top: 20px;
}
#navigation ul li a { background-color: #dedede; line-height: 60px; font-size: 40px;
}
Теперь точно такое же содержимое, что мы видели раньше, отображается с использованием другого макета в зависимости от размеров текущей области просмотра. Медиазапросы — это отличная штука, не так ли? Устроим вечеринку. Пока вы сходите за шампанским, я посмотрю, как наша страница выглядит на экране моего iPhone. Вы можете увидеть это На рисунке 2.12.
Проектируемая страница на экране iPhone
Добавить комментарий