Адаптивный сайт или мобильная версия

Адаптивный сайт или мобильная версия

Posted by nadezhda | Среда Февраль 24th, 2016 | Блог Компании, Технологии

Адаптивный дизайн – это конфигурация, в которой сервер отправляет одинаковый HTML-код на любые устройства, а размеры элементов страницы корректируются с помощью CSS. Алгоритмы Google автоматически распознают такую конфигурацию, если все агенты пользователя Googlebot могут сканировать страницу и ее ресурсы (CSS, JavaScript и изображения).

Смысл адаптивного макета в том, что сайт динамически (в режиме реального времени) подстраивается под размер вашего устройства, и если размер дисплея вдруг расширится / сузится (как при ресайзе браузера или смене ориентации планшета), то и сайт на это отреагирует незамедлительно, без перезагрузок и задержек.

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

из рецензии на сайт Sparkbox

Для создания гибкого макета мы должны использовать только относительные единицы измерения: em для размера шрифтов и % для размеров элементов. В редком использовании px тоже нет ничего плохого, но лучше свести их использование к минимуму.

Раньше ширина этого блога была фиксированной и равнялась 1080px, вместо этого нам нужно взять какое-то более гибкое значение, например 90% окна браузера. При этом я решил, что сайт все равно не должен быть слишком широким, и поэтому сразу же ограничил его ширину до моих любимых 1080px, в итоге было:

h1,#logo,#width,#slogan,#h ul{width:1080px;margin-left:auto;margin-right:auto}

Стало:

h1,#logo,#width,#slogan,#h ul{width:90%;max-width:1080px;margin-left:auto;margin-right:auto}

Почему именно 90%? Просто мне так захотелось, я решил, что отступы по 5% справа и слева будут самое то. Можно было поставить 99% или 80%, всё зависит от вашей задумки.

Идём далее, у меня есть 2 колонки: основная колонка (та, где вы сейчас находитесь глазами) и правая колонка. Их ширина равнялась 780px и 280 px, но теперь мы должны пересчитать её в процентах, и вот вам формула на все случаи жизни:

target / context = result

или если говорить упрощенно и по-русски, то:

Ширину (размер шрифта) нужного элемента в px разделить на ширину (размер шрифта) родительского элемента в px = искомый результат в % (или em).

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

Итак, основная колонка в фиксированном варианте равна 780 px, её контекст (родитель) в фиксированном варианте имеет ширину 1080px, в итоге:

780 / 1080 = 0.72222222222

Так как нам нужны проценты, а не em, то результат нужно умножить на 100, в итоге получаем:

72.222222222%

Вы, наверное, надеялись, что я округлю это число? Но нет, в книге этого категорически не рекомендуют. Поэтому смотрите по ситуации, насколько важна в вашем случае точность. В случае двух колонок такая точность совершенно не важна, поэтому я со спокойной душой решил округлять всё до 4 знаков после точки. В итоге вот мой CSS для основной колонки:

#c{float:left;width:72.2222%;} /* 780 / 1080 */

Обратите внимание, рекомендуется оставлять комментарии с расчётами, иначе вы забудете и запутаетесь что на что делить в дальнейшем. Лично я люблю оставлять в комментариях только первое число — делитель.

Проделываем тоже самое с правой колонкой:

#r{float:right;width:25.9259%;color:#000} /* 280/1080 */

Надеюсь, суть ясна, теперь перейдём к размерам шрифта, который рассчитывается точно также.

По умолчанию десктопные браузеры выставляют размер шрифта 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 */

И так с каждым элементом, действительно нудно, не правда ли? Но наши труды с лихвой окупятся в виде стабильного трафика с мобильных устройств.

.

Add a comment

*Please complete all fields correctly

Интересные статьи

Posted by nadezhda | 21 Июль 2017
Решение для Opencart 2.3.0.2. Если хотите сделать автозаполнение поля Модель уникальными артикулами и показывать их пользователям. В файле admin/controller/catalog/product.php находим участок кода (примерно строка 760):   if (isset($this->request->post['model'])) {  …
Posted by nadezhda | 24 Февраль 2016
Сегодня для получения каких-либо нужных сведений человек включает компьютер и заходит в Интернет. Каждый владелец сайта заинтересован в увеличении количества посетителей, а это зависит, прежде всего, от…
Posted by nadezhda | 24 Февраль 2016
К сожалению огромная армия даже опытных, «модных» и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не только «супер-скриншот» годный только для портфолио. Первоначально эта памятка писалась мною для внутреннего пользования но, обрастая…