Решил начеркать пару строк по адаптированию сайта под мобильные устройства на своём примереи в общих чертах. Самый простой выход выбрать уже готовый адаптированный шаблон благо они есть или же делать мобильную версию сайта что гораздо проще, но при этом мы теряем уникальность основного сайта и многие функции не доступны в PDA версии (только для чтения). Для сайтов с адаптивным дизайном используйте мета-тег
чтобы указать область просмотра контента. Вообщем первым делом я стал делать шаблон резиновым, гибким, так как изначально ширина сайта была фиксированной 960px то нужно перевести эти размеры в проценты, для этого пришлось посидеть за калькулятором. В СSS сайта находим параметры ширины вашего сайта, например у меня вот они в самом начале:
.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% меняем в таблице стилей вместо фиксированных в пикселях и советую не округлять эти числа а минимум как на примере. И так далее со всеми нужными параметрами: переводим в проценты, процесс нудный согласен... Как пример на моём сайте получилось так (кусок из стилей):
Надеюсь, суть ясна, теперь перейдём к размерам шрифта, который рассчитывается точно также. Мне повезло были выставлены размеры уже в 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 класс отвечающий к примеру за ширину хэдера, футера, .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.
Сообщение отредактировал Angerfist - Понедельник, 25 Апреля 2016, 01:39
