В последней статье мы рассмотрели основные правила создания простого макета для веб-сайта. После того, как мы сконцентрируемся на версии для ПК, в этой пятой части серии мы увидим, какие правила следует применять, чтобы сделать макет адаптивным.
Итак, конечный результат станет приятным как для планшетов, так и для смартфонов, как мы увидим в заключительной части. Помните, что адаптивный дизайн — это не просто метод, применяемый для похлопывания по спине, а способ повысить удобство пользования сайтом.
Как я уже говорил в четвертой статье серии, для ясности мы будем использовать две таблицы стилей для нашего сайта, чтобы разделить разные концепции; в связи с этой темой следует помнить, что в производственном процессе вы должны использовать один из доступных инструментов, чтобы свести к минимуму и объединить различные таблицы стилей CSS в уникальный файл для повышения производительности. Вы можете использовать автономный инструмент, такой как Minify, или онлайн- инструмент, который объединяет несколько файлов CSS или Javascript, удаляет ненужные пробелы и комментарии и служит для них одним файлом.
Возвращаясь к нашим файлам, первое, называемое common.cssразделены (унаследованы) тремя версиями проекта, в то время как одно, называемое responsive.css По этой причине важно установить то, что мы называем «точками останова», то есть шириной браузера, в которой есть объявление медиа-запроса, чтобы изменить макет, как только браузер окажется в заявленном диапазоне ширины.
Теперь давайте углубимся в код и рассмотрим, какие наиболее важные изменения мы должны применить, чтобы получить наш результат.
Прежде всего, мы должны установить выбранные точки останова в нашем документе. Чтобы сделать это, вы должны поместить эту строку в верхней части responsive.css
@media screen and (max-width: 768px)
Для этого мы ограничиваем стили, определенные там, на экране (например, не для печати или устройства Брайля) и еще больше ограничиваем область видимости для экранов размером 768 пикселей или меньше. Итак, все правила, которые мы наложим на эту спецификацию, будут применяться только к устройствам, экран которых не превышает 768 пикселей.
Прежде чем продолжить, уделите минуту размышлению над фактом: адаптация сайта не означает привязку к пикселям.
Когда веб-дизайнер планирует и реализует веб-сайт, применяя технику адаптивного веб-дизайна, он хочет, во-первых, создать приятное впечатление для пользователей, которые могут посещать его с помощью различных устройств; Между тем, этот опыт должен быть подкреплен надлежащим применением принципов этой серии методов, а выполнение этого означает избегание слишком строгой ссылки на жесткие и фиксированные схемы. В случае выбора контрольных точек проектировщик должен продумать макет, не строго чувствительный к этим признакам, но гибкий и адаптивный.
В этом свете очень интересна эта статья Крейга Баклера, которая демонстрирует, как браузеры ведут себя по-разному при запуске событий медиазапроса, представляя различные подходы к вычислению размера вертикальной полосы прокрутки. В частности, выбор привязки к пикселям повышает риск возврата к прошлым временам, когда веб-сайты были оптимизированы только для определенного размера, и даже малейшие изменения повлияли на его правильное представление. Поэтому имейте это в виду при проектировании и реализации адаптивного веб-сайта и, прежде всего, выполните все необходимые тесты, прежде чем считать свою работу законченной.
После этого небольшого отступления, давайте посмотрим, как наконец будет выглядеть наш планшетный макет.
Как вы можете видеть, его внешний вид не сильно изменился, но на этот раз страница занимает всю доступную ширину экрана. Список меню сохранил тот же стиль, хотя теперь его пункты ближе, чем раньше. Кроме того, нижний колонтитул с социальными иконками не изменился, а также ящики с основным контентом сохранили то же плавающее пространство.
Как вы увидите, читая следующий код, есть несколько правил для этой версии.
@media screen and (max-width: 768px)
{
#banner > img
{
max-width: 100%;
}
ul.menu-list
{
height: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
li.menu-item
{
margin: 0em 0.2em;
width: auto;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch
{
width: 100%;
display: inline-block;
*display: inline;
zoom: 1;
}
a.menu-item-link
{
font-size: 1.1em;
}
#wrapper
{
width: inherit;
}
.small-box
{
width: inherit;
float: none;
}
#wrapper
{
float: none;
}
.social-bar a
{
margin-right: 0em;
}
#newsletter-form
{
font-size: 1em;
}
input#newsletter-email
{
width: 10em;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
#team-logo-bar a
{
text-decoration: none;
width: 100%;
display: inline-block;
text-align: center;
}
}
Правила, которым вы должны уделять больше внимания в этой версии, это правила, применяемые к изображению баннера, пунктам меню и к полю новостной рассылки. Для первых, благодаря правилу max-width: 100%; изображение будет отображаться с исходными размерами, если его ширина не превышает ширину контейнера. При изменении размера окна браузера пропорции изображения останутся без изменений, даже если страница соответствующим образом уменьшится.
Для пунктов меню было бы хорошо, если бы все пункты меню были равномерно распределены между ними. Кроме того, интервал также должен быть «плавным», чтобы по мере масштабирования размера окна браузера даже пространство между различными голосами уменьшалось, оставаясь одинаковым. Приведенное выше решение совместимо со всеми браузерами, включая IE 6. Вспоминая HTML-код из третьей статьи, мы добавили в наш список элемент с классом stretch
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a class="menu-item-link" href="./homepage" title="Homepage">Homepage</a>
</li>
...
<li class="stretch">
</li>
</ul>
</nav>
К списку ( ul.menu-listtext-align: justify; что в сочетании с классом stretch
Следующим шагом является установка для класса stretchdisplay: inline-block; , Как вы, возможно, знаете, элемент с правилом display: inline-block; размещается в строке (например, в той же строке близкого содержимого), но ведет себя как блок. Поскольку в IE7 и ниже последний не поддерживается, мы должны написать небольшой взлом, который очень прост. Он имеет дело с так называемым «безопасным взломом CSS», то есть цитирование объяснения Матиаса Биненса является взломом, который работает в определенных версиях данного веб-браузера и вряд ли будет проанализирован всеми другими браузерами, включая будущие версии.
Чтобы сделать это, мы должны добавить к элементу стиля эти две короткие строки (как мы сделали для пунктов меню), и это все:
*display: inline;
zoom: 1;
Для IE6 / 7 zoom: 1 предоставляет свойство hasLayout Наличие «макета» является обязательным условием для display: inline-block Как эта статья ясно объясняет,
zoomhasLayoutЭлементы, имеющие как «layout», так иdisplay: inlineinline-block
Последнее, что стоит обсудить, — это транзакции. Для устройств с маленькими экранами пользователи должны быстро и без труда добраться до того, что ищут. Лучше всего убрать чисто стилистические эффекты в избытке. Первая причина более теоретическая: заинтересованы ли пользователи в том, чтобы увидеть такой эффект на маленьком экране? Или они беспокоятся в основном о функциональности сайта?
Ответ, вероятно, функциональность, и это оправдывает упущение. Вторая причина более практична: большинство планшетов и мобильных телефонов оснащены сенсорными технологиями. Фактически, планшеты и смартфоны — это устройства, которые не используют мышь, поэтому у них нет событий зависания.
Выводы
В этой пятой части серии мы рассмотрели правила, которые мы должны применять, чтобы сделать наш веб-сайт отзывчивым и обеспечить хорошую производительность на планшетах.
В следующей и последней части мы закончим его кодом для мобильных устройств и некоторыми заключительными замечаниями и советами.