—»     —»   Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт
  Раздел: Руководства   Нет комментариев  

Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт



Приветствуем вас, друзья! Если вы частенько посещаете наш сайт, то наверняка уже видели похожие статьи. Сегодня же мы хотим рассказать вам о том, как можно Burnstudio Design Agency из PSD превратить в полностью функционирующую HTML/CSS-страницу. Мы обсудим то, как лучше сделать разметку HTML, а также то, как и какие лучше стили применить. Сегодня, в данном руководстве, мы хотим научить вас разработке адаптивного дизайна при помощи Media Queries. Media Queries изменяют внешний вид веб-сайта в зависимости от разрешения экрана устройства при помощи изменения CSS-стилей.

В конце данного руководства вы будете уметь конвертировать любой веб-сайт в адаптивный.

Давайте приступим!

Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт
Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт

Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Этап 1: Подготовка

Не забудьте ознакомиться с предыдущей статьей (англ.), где мы конвертировали PSD-файл в полностью функционирующую HTML/CSS-страницу. Для начала мы хотим пояснить, что мы будем разрабатывать дизайн в соответствии с имеющимся дизайном для различных окон просмотра. В данном случае, для мобильного устройства, где параметр max-width составляет 320 пикселей.

Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт

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

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

Этап 2: Подготовка файлов

Убедитесь, что вы открыли HTML и CSS-файлы в вашем текстовом редакторе, и мы сможем приступить.

Этап 3: Добавление мета-тега

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Это будет управлять шаблоном на мобильных браузерах. Поместите это внутрь тега, и можно продолжать.

Этап 4: Работаем с окном просмотра меньше 960

Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт

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

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

styling goes here

}

Первый media query будет определять экраны меньше 960 пикселей.

Теперь давайте добавим следующий CSS-код:

/* VIEWPORT < 960px */

@media only screen and (max-width: 960px){
header, nav, #slides, #service, #widget, #media, #client, footer, #container{ width: 768px; }
.slide-right{
left: 0;
}
.slide-heading{
width: auto;
height: auto;
padding: 0;
margin: 0 0 20px 0;
background-image: none;
color: #333;
}
.slides_container div img{
display: none;
}
.slide-right .info{
width: 768px;
margin-bottom: 20px;
margin-left: 0;
}
.slide-right .readmore{
margin-left: 0;
}
.slides_container{
height: 200px;
}
a.next{
right: 0px;
}
a.prev{
right: 25px;
}
.pagination{
left: 0;
}
#service{
background: none;
height: auto;
}
#vector{
padding-left: 0;
width: 369px;
}
#vector img{
margin-right: 0;
}
#web{
padding-left: 0;
width: 369px;
}
#web img{
margin-right: 0;
}
#facebook{
display: none;
}
#twitter{
margin-left: 18px;
}
#blog{
clear: both;
}
#links{
width: auto;
margin-bottom: 30px;
}

#links ul li{
float: left;
margin-right: 30px;
}
}

Так как наша разметка сейчас меньше 960 пикселей, мы изменим стилизацию всех элементов основного контейнера, задав им ширину 768 пикселей.

Далее переходим к области слайдера. Обратите внимание на то, что у нас здесь имеется заглавие с классом slide-heading, div-элемент с классом slide-right, который содержит в себе информацию и ссылку перехода к полной версии. Нам нужно изменить стиль этих элементов, исключив фон заголовка и изменив фиксированное значение ширины/высоты на auto, исключить отступы, добавить 20-пиксельные поля и, наконец, изменить цвет на темно-серый. Элемент img, который отображается в нашем слайдере, мы скроем, изменив значение его параметра display на none. Для классов slide-right .info .readmore мы исключим левое поле, чтобы сместить элементы больше в левую сторону, а также давайте в классе .info изменим ширину на 768 пикселей, и добавим нижнее поле размером в 20 пикселей. Что касается управления слайдером, то здесь давайте просто сместим кнопку Next максимально вправо, выставив значение right на 0px, а у кнопки Prev этому же параметру зададим значение 25px. Наконец, в пагинации мы изменяем значение параметра left на 0px.

Переходим к разделу услуг (service). Когда мы разрабатывали код раздела услуг, мы забыли его родительскому контейнеру добавить класс group. Нам уже известна функция этого класса, поэтому мы не будем объяснять его. Что касается CSS, то здесь мы просто исключим фон и изменим значение параметра height на auto.

<div id="service" class="group">

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

В разделе медиа у нас нет достаточно места, и поэтому давайте скроем Facebook, изменив значение параметра display на none. Возможно, вы удивитесь, для чего нам его прятать? Конечно же, мы понимаем, что нам нужно найти способ сделать абсолютно все адаптивным, но нам довелось прочитать на других блогах о том, что нужно скрывать/прятать некоторые элементы ввиду недостатка пространства. Вы можете взять в пример другие веб-сайты – они убирают из меню несколько ссылок, чтобы сэкономить место.

В разделе виджетов нам нужно изменить только ссылки. Давайте изменим исходную ширину на auto, а затем выровняем элементы li по левому краю и добавим правое поле размером 30px.

Этап 5: Работаем с окном просмотра меньше 768

Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт

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

styling goes here

}

Вышеприведенный CSS-код – это наш второй media query, который будет определять экраны меньше 768 пикселей (Планшетные ПК в вертикальном положении).

Теперь давайте добавим следующий CSS-код:

/* VIEWPORT < 768px */
@media only screen and (max-width: 768px){
header, nav, #slides, #service, #widget, #media, #client, footer, #container{
width: 524px;
}
nav ul li.last{
display: none;
}
.slides_container{
height: 250px;
}
.slide-right .info{
width: 524px;
}
#web{
width: 100%;
margin-bottom: 30px;
}
#web img{
padding-left: 20px;
}
#vector{
width: 100%;
}
#vector img{
padding-left: 20px;
}
#service{
height: auto;
}
#video{
margin: 0 auto 30px auto;
float: none;
}
#twitter, #facebook{
float: none;
margin: 0 auto;
margin-bottom: 30px;
}
#facebook{
display: block;
}
#links{
width: 285px;
float: none;
margin: 0 auto;
}
#links ul li{
width: 285px
}
#blog{
float: none;
margin: 30px auto;
}
#location{
float: none;
margin: 0 auto;
}
#client ul li{
width: 100%;
float: none;
margin: 30px 0;
}
#footer-left{
width: 100%;
margin-bottom: 30px;

}
#footer-left p{
text-align: center;
}
#footer-right{
float: none;
width: 100%;
margin-bottom: 30px;
}
#footer-right ul{
float: none;
width: 75%;
margin: 0 auto;
}
}

Первый этап схож с тем, что мы делали в предыдущем разделе. Давайте изменим ширину наших основных контейнеров на 524 пикселя.

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

Что касается области со слайдером, давайте понизим высоту контейнера до 250 пикселей, и изменим ширину .info до 524 пикселей.

В разделе вектора и веб давайте изменим ширину на 100% для того, чтобы заполнить все пространство, а затем зададим разделу веб нижнее поле величиной 30 пикселей.

В разделе медиа по умолчанию наш div-элемент с видео выравнивается по левому краю, и нам нужно изменить это значение на none, расположить его по центру и добавить нижнее поле величиной 30 пикселей. Для виджетов Twitter и Facebook – та же задача. Изменить значение float на none, расположить их по центру и добавить нижнее поле величиной 30 пикселей и, наконец, нужно снова отобразить Facebook, изменив значение параметра display на block.

В разделе виджетов нам все нужно выровнять по центру, поэтому мы зададим ссылкам фиксированную ширину в 285 пикселей, изменить float на none, и добавить параметр margin со значением 0 auto. Теперь, когда мы расположили ссылки, давайте правильно расположим блог и локацию, проделав то же самое.

В разделе клиентов по умолчанию мы задали 10% ширины для того, чтобы равномерно разделить его и правильно расположить изображения. Теперь давайте изменим ширину на 100% и добавим нижнее поле величиной 30 пикселей.

В подвале давайте будем использовать 100% ширины в параметрах footer-left и footer-right. В footer-left мы разместим текст по центру, просто добавив text-align: center. Что касается ссылок в подвале, то нам нужно добавить класс group к контейнеру footer-right.

<div id="footer-right" class="group">

Теперь, когда мы добавили класс, давайте изменим выравнивание на none и добавим нижнее поле величиной 30 пикселей. Наконец, мы изменим ширину на 75% и зададим параметр margin со значением 0 auto для того, чтобы разместить его по центру.

Этап 6: Работаем с окном просмотра меньше 524

Руководство по Media Queries: конвертируем Burnstudio в адаптивный веб-сайт

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

styling goes here

}

Это наш третий media query, который будет определять экраны меньше 524 пикселей (мобильные устройства).

Теперь давайте добавим следующую CSS-стилизацию:

/* VIEWPORT < 524px */
@media only screen and (max-width: 524px){
header, nav, #slides, #service, #widget, #media, #client, footer, #container{
width: 300px;
}
header h2 a{
width: 100%;
background-position: center top;
}
nav{
height: auto;
}
nav ul li{
float: none;
border: none;
border-bottom: 1px solid #336c2b;
border-top: 1px solid #78c368;
}
nav ul li.home{
border-top: none;
}
nav ul li.last{
display: block;
border-bottom: none;
width: 100%;
margin: 0;
}
nav ul li.last div{
margin-left: 15px;
}
nav ul li a{
text-align: center;
}
nav ul li.home a:hover{
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 0;
background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}
#call{
display: none;
}
.slides_container{
height: 270px;
}
.slide-heading{
width: 300px;
}
.slide-right .info{
width: 300px;
}
#web img{
width: 64px;
height: 72px;
}
#vector img{
width: 76px;
height: 69px;
}
#service{
height: auto;
}
#footer-right ul{
float: none;
width: 285px;
margin: 0 auto;
}
#footer-right ul li{
float: none;
margin: 0;
}
#footer-right ul li a{
padding: 8px 0;
}
}

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

Далее нам нужно скрыть div call, добавив параметр display: none. Что касается логотипа, давайте разместим его по центру, задав значение параметра ширины 100%, и добавив background-position center top.

В разделе nav давайте сделаем так, чтобы навигация была вертикальной, что идеально подходит для мобильных устройств. Сначала, давайте зададим nav параметр высоты auto, снимем выравнивание с элементов li, уберем границы, так как у нас будет border-left и right по умолчанию, затем перепишем стиль, снова добавив border-bottom и top. Теперь давайте исключим border-top для .home и border-bottom для .last. Мы также отобразим строку поиска, применив display block, в .last также следует задать ширину 100% и исключить поля. Для того чтобы правильно расположить поисковую строку, примените левое поле размером 15 пикселей к div-элементу li.last. Теперь давайте расположим текст по центру, применив text-align center. Далее мы изменим border-radius на top-left и top-right при наведении на .home.

В разделе со слайдером давайте просто изменим ширину контейнера на 270 пикселей и .slide-heading и .info изменим ширину на 300 пикселей.

В разделе услуг давайте изменим ширину и высоту изображения веб и вектора, а затем зададим div-элементу с услугами значение параметра высоты auto.

Наконец, мы оформляем ссылки в подвале, изменяя float на none, задав ширину 285 пикселей, и расположим их по центру. Что касается элементов li, измените float на none и исключите поля. Затем задайте элементу a верхнее и нижнее поля размером 8 пикселей.

На этом всё!

И на этом, пожалуй, всё! Только что мы перевели HTML-разметку в адаптивную. Понравилось ли вам руководство? Надеемся, что вы почерпнули для себя нечто новое. Если у вас есть какие-то предложения, вопросы или комментарии, то не стесняйтесь активничать в комментариях.

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

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

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

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


Spa салон
Избранные тайские салоны: Релакс и spa-ритуалы, подарочные сертификаты
spasalonhd.ru
Купить сиалис
купить сиалис
vip-apteka78.ru
Гайки
Болты, анкера, гайки, строительный крепеж и пр
1ask.by
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31