• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Пример по созданию адаптивного дизайна (Базовый пример на своём опыте)
Пример по созданию адаптивного дизайна
Angerfist
Воскресенье, 24 Апреля 2016 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21
Решил начеркать пару строк по адаптированию сайта под мобильные устройства на своём примереи в общих чертах.
Самый простой выход выбрать уже готовый адаптированный шаблон благо они есть или же делать мобильную версию сайта
что гораздо проще, но при этом мы теряем уникальность основного сайта и многие функции не доступны в PDA версии (только для чтения).
Для сайтов с адаптивным дизайном используйте мета-тег
Код

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

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

/* Grid Container */
.rt-container {margin: 0 auto; width: 960px}
body {min-width: 960px}

я первым делом меняю на
Код

.rt-container {margin: 0 auto; width 100%; max-width:960px}
body {min-width: 240px;}

то есть ширина сайта будет максимально также 960px а минимально будем подстраиваться для смартфонов 240px, ширину в процентах можно сделать и 90% в зависимости от того хотите ли вы отступы по бокам. Я лично задал отступы уже в медиа запросах но о них позже. Вернёмся к калькулятору), дальше приходится переводить в проценты ширину колонок, к примеру основной и сайдбара с блоками, находим в CSS параметры отвечающие за их ширину, и ширину колонки например у меня основная 620px делим на ширину общей основной ширины сайта 960px и умножаем на 100%, или колонки с блоками допустим 300px тоже делим на 960px и также умножаем на 100%, полученные результаты 64.5833% и 31.25% меняем в таблице стилей вместо фиксированных в пикселях и советую не округлять эти числа а минимум как на примере. И так далее со всеми нужными параметрами: переводим в проценты, процесс нудный согласен...
Как пример на моём сайте получилось так (кусок из стилей):
Код

/* 12 GRID STYLES */
/* 12 Grid */
.rt-grid-1, .rt-grid-2, .rt-grid-3,.rt-grid-4, .rt-grid-5, .rt-grid-6, .rt-grid-7, .rt-grid-8, .rt-grid-9, .rt-grid-10, .rt-grid-11, .rt-grid-12, .rt-grid-13,
.rt-grid-14 {display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px}

.rt-container .rt-grid-1 {width: 6.25%}
.rt-container .rt-grid-2 {width: 14.5833%}
.rt-container .rt-grid-3 {width: 22.9166%}
.rt-container .rt-grid-4 {width: 31.25%;}
.rt-container .rt-grid-5 {width: 39.5833%}
.rt-container .rt-grid-6 {width: 47.9166%}
.rt-container .rt-grid-7 {width: 56.25%}
.rt-container .rt-grid-8 {width: 64.5833%}
.rt-container .rt-grid-9 {width: 72.9166%}
.rt-container .rt-grid-10 {width: 81.25%}
.rt-container .rt-grid-11 {width: 89.5833%}
.rt-container .rt-grid-12 {width: 97.9166%}
.rt-container .rt-grid-13 {width: 31.25%}
.rt-container .rt-grid-14 {width: 64.5833%}

/* Grid Push */
.rt-container .rt-push-1 {left: 8.3333%}
.rt-container .rt-push-2 {left: 16.6666%}
.rt-container .rt-push-3 {left: 25%}
.rt-container .rt-push-4 {left: 33.3333%}
.rt-container .rt-push-5 {left: 41.6666%}
.rt-container .rt-push-6 {left: 50%}
.rt-container .rt-push-7 {left: 58.3333%}
.rt-container .rt-push-8 {left: 66.6666%}
.rt-container .rt-push-9 {left: 75%}
.rt-container .rt-push-10 {left: 83.3333%}
.rt-container .rt-push-11 {left: 91.6666%}

Надеюсь, суть ясна, теперь перейдём к размерам шрифта, который рассчитывается точно также. Мне повезло были выставлены размеры уже в em...По умолчанию десктопные браузеры выставляют размер шрифта 16px, но нам пиксели не желательны, поэтому если вы хотите оставить это же значение нужно:
16 (нужное значение) / 16(значение по умолчанию) = 1 em, это пример с одного блога, товарищ посчитал ЦИТИРУЮ :
"я считаю шрифт в 16 пикселей слишком мелким, я предпочитаю 18, поэтому: 18 / 16 = 1.125 em
Пишем в CSS:
Код

body{font-family:"Times New Roman";font-size:1.125em;}

Размер шрифта его логотипа «Site on!» в фиксированном макете составляет 40px, переведём его в em: 40/18=2.2222em
Вы обратили внимание? Теперь мы делим не на 16px, а на 18px, так как у родителя (у тега body) моего логотипа размер 18px, в итоге CSS:
Код
body{font-family:"Times New Roman";font-size:1.125em;} /* 18px */
#logo a{text-decoration:none;font-size:2.2222em;color:#000} /* 40px */

И так с каждым элементом, действительно нудно, не правда ли? Но наши труды с лихвой окупятся в виде стабильного трафика с мобильных устройств."
Вообщем принцип гибкой разметки:
Ширину нужного элемента в px разделить на ширину родительского элемента в px = искомый результат в % (или em).
Дальше если проверить уже на адаптивность мы заметим что сайт стал гибким и сужаться, но становится некрасиво, элементы блоков и колонок налазиют друг на друга, в принципе уже можно переходить к медиа запросам и настраивать колонки с содержимым но я же показываю свой пример поэтому первым делом разведём весь котент в одну колонку:
посмотрев HTML код страниц сайта и нашёл где какие классы отвечают за ширину основных величин: шапки сайта, основного контента, футера, сайдбара и т.д. В итоге нашёл что основного контента класс rt-grid-8, шапки и футера rt-grid-12 а сайдбара rt-grid-4 а у вас конечно же другие)
Переходим наконец к медиа запросам: добавляем в САМЫЙ конец таблицы CSS:
Код

@media screen and (min-width:240px) and (max-width:960px) {
.rt-container  {
margin: 0 auto;
float:none;
width:96%;}

обьясню, тут как принцип языков программирования if - else, если ширина контента сайта будет равна 960 пикселям и ниже до 240 то будут отступы по бокам по 2%(я посчитал так красивей), центрирование и убрали выравнивание по левому краю. То есть (max-width:960px) данное значение говорит браузеру с какого разрешения применять правило, а min-width:240px не даст сузить сильно сайт. Между этими скобками {} мы пишем новые свойства классам, которые отличаются от основных стилей шаблона, я не стал там ничего менять и так вышло нормально.
Далее :
я тут же дописываю новые правила для колонок, футера, хэдера и т.д. обошлось малой кровью всего 3 параметра)
Код

.rt-container .rt-grid-12 {
margin: 0 auto;
float:none;
width:100%;
}
.rt-container .rt-grid-4 {
margin: 0 auto;
float:none;
width:100%;
}
.rt-container .rt-grid-8 {
margin: 0 auto;
float:none;
width:100%;
}

.rt-container .rt-grid-12 класс отвечающий к примеру за ширину хэдера, футера, .rt-container .rt-grid-4 за колонку с блоками а .rt-container .rt-grid-8 за основную колонку с контентом, убираем отступы float:none так как изначально было float: left и float: right и растягиваем на всю ширину сайта.
При этом у меня получилось так что теперь Шапка как положено вверху на всю ширину,основной контейнер занимает тоже всю ширину сайта а контейнер с блоками справа ушёл вниз под него и тоже занимает всю ширину, также и с футером и слайдером. Правда слайдер я сразу нашёл адаптивный "FlexSlider" (к тому же легковесный) Получилось всё в одну колонку...
Отвлекусь, можно не сразу делать в одну колонку а например сужать в нормальном расположении до 640px и лишь потом выстраивать в одну. То есть медиа запросы начинаете на 100% не с max-width:960px а 640px. Для этого в медиа запросах придётся приводить в порядок блоки и контент, либо сразу делать гибким контент. Снова отвлекусь, для изображений я не менял как советуют:
Код
img{max-width:100%;height:auto;}

так как правила будут действовать на все изображения, а лишь в самих картинках и так чтоб максимум было либо 300px либо внутри картинки указывал ширину 100% а высоту фиксированную или auto) да и делал блоки гибкими сразу, а также адаптивное меню и слайдер. Вообщем всё по отдельности собирал а тут показываю поверхностный пример). Про адаптированность видео на форуме уже написано, поэтому пройду мимо этой темы. Дальше я конечно же стал смотреть сайт на самих мобильных устройствах и эмуляторах под разными разрешениями и вписывать правила если что то не так...
например при 340 px у меня вылазил поиск за границы, нашёл стили отвечающие за длину поиска и написал запрос:
Код

@media screen and (min-width:240px) and (max-width:480px) {
#rokajaxsearch .inputbox {width: 225px;}
}
@media screen and (min-width:240px) and (max-width:320px) {
#rokajaxsearch .inputbox {width: 200px;}
}

в итоге после 480px его длина стала 225px а после 320px-200px. Или же есть вид материалов в 2 колонки, не стал делать его гибким так как при 320 px они очень махонькие и хрен разглядишь что там, а сделал так чтоб при нормальном состоянии сайта были две колонки (float:left; width: 50%;) а при просмотре на смартфоне например samsung galaxy была одна колонка:
Код

@media screen and (min-width:240px) and (max-width:640px) {
.style-block {width:100%;float:left;}
}

Вообщем смотрим под разными разрешениями и меняем стили в запросах... И ещё, администратор этого сайта подогнал интересное решение, есть же на сайте блоки или информеры которые ну совсем не нужны на маленьких экранах, отвлекают или делают прокрутку вниз сайта утомительно длинной или вообще для красоты, то применим опять таки же в запросах такой код:
Код
.ifnot-mob {display: none!important;}

В медиа запросах к примеру мы хотим чтоб он был скрыт:
Код

@media screen and (min-width:240px) and (max-width:960px) {
.ifnot-mob {display: none!important;}
}

это обычное правило для display когда хотим скрыть блок не убирая его совсем, при этом я например убрал боковое меню, зачем два меню на сайте на экране айфона?) или блоки новые материалы, рандомные фото и т.д.) При этом либо обносим в
Код
<div class="ifnot-mob">здесь код который нужно скрыть</div>
либо в самих стилях пишем display: none!important;
Базово это всё, если есть дополнения или ошибки пишите, повторюсь я привёл только свой пример и конечно же я не забывал про отступы и при правильном подходе можно сразу наладить в общих стилях что сведёт к минимуму медиа запросов. Не судите строго если что пропустил, нелегко писать статьи, как я понимаю блогеров)))
Как пример был шаблон Dominion.


No regrets

Сообщение отредактировал
Angerfist - Понедельник, 25 Апреля 2016, 01:39
Страна: (RU)
Kosten
Воскресенье, 24 Апреля 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, не чего себе пару строк, а так реально познавательно, так поверхностно знал. но сильно не вникал в суть, здесь придется подучить.
Страна: (RU)
Angerfist
Воскресенье, 24 Апреля 2016 | Сообщение 3
Оффлайн
Vip
Сообщений:767
Награды: 21
Только я свой пример привёл) кто то по иному может делает, поэтому не судите строго))

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 24 Апреля 2016, 17:16
Страна: (RU)
FeStemBer
Воскресенье, 24 Апреля 2016 | Сообщение 4
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Angerfist, это то что как раз нужно знать веб мастеру, только аплодисменты, так как еще оригинально написано.
Страна: (RU)
Kosten
Воскресенье, 24 Апреля 2016 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Tventum, вот и второй урок сразу, пишешь оригинально и не копируешь а своими словами, то статьи такие залетают в поиск на раз.

Прикрепления: 2665103.png (16.8 Kb)
Страна: (RU)
Сафрон
Воскресенье, 24 Апреля 2016 | Сообщение 6
Оффлайн
Vip
Сообщений:224
Награды: 1
Адаптация под мобильные устройства, глядя на все, это дело тонкое. biggrin
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Пример по созданию адаптивного дизайна (Базовый пример на своём опыте)
  • Страница 1 из 1
  • 1
Поиск: