—»     —»   Разработка адаптивного веб-сайта – часть 8: внутренняя страница – часть 2
  Раздел: Руководства   Нет комментариев  

Разработка адаптивного веб-сайта – часть 8: внутренняя страница – часть 2

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

Если вы не читали 7 наших предыдущих статей из этой серии, то мы настоятельно рекомендуем вам ознакомиться с ними:

Разработка адаптивного веб-сайта: фоновые изображения
Разработка адаптивного веб-сайта – часть 2: навигация и контент
Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице
Разработка адаптивного веб-сайта – часть 4: завершаем разработку слайдера на главной странице
Разработка адаптивного веб-сайта – часть 5: подвал
Разработка адаптивного веб-сайта – часть 6: подвал – продолжение
Разработка адаптивного веб-сайта – часть 7: внутренняя страница

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

Разработка адаптивного веб-сайта – часть 8: внутренняя страница – часть 2

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

Сначала нам нужно выставить некоторые параметры для нашей основной секции services под media query, предназначенного для планшетных устройств. Нам надо применить изображения среднего размера, чтобы сократить скорость загрузки. Итак, под строкой Tablet Layout: 768px @media only screen and (max-width: 1024px) and (orientation:landscape) мы добавили следующий код CSS.

#services {
background: url(images/servicesMed.jpg) no-repeat fixed;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

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

.servCats {
width:100px;
height:100px;
margin-left:12%;
}

.servCats p {
width:100px;
text-align:center;
margin-top:30px;
}

.servCats a {
font-size:1.2em;
}

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

#services {
background: url(images/servicesMed.jpg) no-repeat fixed;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.servCats {
width:100px;
height:100px;
margin-left:12%;
}

.servCats p {
width:100px;
text-align:center;
margin-top:30px;
}

.servCats a {
font-size:1.2em;
}

Осталось нам обработать media query для мобильных устройств. Здесь мы собираемся взять наши два элемента servColumn, и отобразить друг над другом, вместо того чтобы отображать их на одной строке, как мы сделали это в случае с большим разрешением.

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

Сперва-наперво нужно определить изображение маленького размера для отображения на мобильных устройствах.

#services {
background: url(images/servicesSmall.jpg) no-repeat fixed;
background-position:top;
background-color:#CFCDCF;
background-size:contain;
}

Как только вы сделаете это, начните изменять размер текста и размер заголовков по всей странице.

.whatWeDo h4 {
font-size:1.2em;
}
#servPageContent {
font-size:.6em;
}

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

.servContent {
min-height:1200px;
max-height:1300px;
}

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

.servColumns {
float:left;
width:80%;
margin-left:10%;
margin-bottom:5%;
}

.servColumns ul li {
list-style:none;
border-right:none;
}
.servColumns h4 {
font-size:1.2em;
}

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

.servCats {
width:100px;
height:100px;
margin:0 0 8% 3%;
}

.servCats p {
width:100px;
text-align:center;
margin-top:30px;
}

.servCats a {
font-size:1.8em;
}
.bubbles34 {
width:250px;
float:right;
}

На этом всё! Сохраняйте проделанную работу и посмотрите, как она теперь выглядит. Теперь постарайтесь самостоятельно создать остальные страницы для своего проекта, но не забывайте делать их адаптивными.

Скачать исходный код примера, разработанного в ходе руководства.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 7992   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031