Адаптивная верстка. Шпаргалки верстальщика. Что такое адаптивная верстка Как сделать div адаптивным

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

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS , понимающих назначение CSS селекторов и т. д.

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

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка (Fixed Layout) - подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body :

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media ), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px 1200px и 320px для всех устройств, ширина которых меньше 480px .

Отзывчивая верстка (Responsive Layout) - это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера - указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

• vw - 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
• vh - 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
• vmin - выбирается наименьшее из vw и vh ;
• vmax - выбирается наибольшее из vw и vh .

Ниже рассмотрен пример использования vw и vh . В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Существуют следующие относительные значения для шрифтов:

• em - задаёт размер относительно шрифта родителя;
• rem - задаёт размер относительно шрифта .

Рассмотрим пример:

Вычислим размер шрифта для тега body . В данном примере размер шрифта для body задается относительно размера html . Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px) .

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html - 16px .

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Рассмотрим пример:

Допустим, что родительским компонентом данного div является body . Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body . Однако он будет увеличиваться только до величины, определенной в max-width , это 500px . Как только контейнер достигнет этой ширины - он перестанет увеличиваться.

Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media , а далее следует условие.

С помощью медиа-запросов можно задать стили для следующих типов устройств:

• all - все типы (значение используется по умолчанию)
• braille - устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
• embossed - принтеры, использующие для печати систему Брайля
• handheld - смартфоны и аналогичные им аппараты
• print - принтеры и другие печатающие устройства
• projection - проекторы
• screen - экран монитора
• speech - речевые синтезаторы, а также программы для воспроизведения текста вслух
• tty - устройства с фиксированным размером символов
• tv - телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:

• Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса

CSS -фреймворк - фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS -фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:

• Более быстрая разработка
• Поддержка кроссбраузерности
• Поддержка различных устройств и размеров экранов
• Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.

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

Рассмотрим самые популярные CSS -фреймворки.

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

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода - от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS -препроцессоров: Less и Sass .

Отличительные черты:

• 12 - колоночная сетка
• Большое количество готовых для использования компонентов
• Поддержка Less и Sass
• Использование Normalize.css.

Material Design for Bootstrap - это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

Отличительные черты:

• 12 - колоночная сетка
• Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

От автора: в будущем в мире интернета ожидается постоянный прирост мобильного трафика. Значит, уже сейчас нужно уметь верстать так, чтобы ваш проект хорошо выглядел на всех устройствах. Решение давно найдено – адаптивная верстка сайта! О ней мы и поговорим.

Простейший способ определить, как сверстан сайт – это уменьшить размеры окна. Если появилась горизонтальная полоса прокрутки, значит это фиксированная верстка. Все размеры задавались, скорее всего, в пикселах. Удобно ли будет пользоваться таким сайтом пользователям на мобильных устройствах? Нет.

По сути, есть два решения этой проблемы. Первый – создать разные версии верстки (для ПК, для планшетов и для мобильных телефонов). Именно так сделано, например, в социальной сети Вконтакте. Второй вариант – сделать адаптивную верстку. Такой сайт будет реагировать на изменение ширины окна. Этот вариант сегодня применяется все чаще и чаще.

Рис. 1. Как видите, даже на мобильном телефоне webformyself неплохо отображается.

Адаптивная верстка ничем не отличается от обычной за исключением того, что в таблицу стилей добавляются медиа-запросы, где прописываются стили для разной ширины экрана. Иногда их выносят в отдельный css-файл, а иногда пишут в конце основной таблицы стилей. Пример медиа-запроса:

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

Давайте разберемся подробнее с этой записью.

@media – собственно обозначение медиа-запроса

Screen – указываем, что это относится к экрану (тут можно также указать телевизор или проектор). Only – означает, что правила будут применены только к screen.

And (и) – добавление условия, для которого будет работать медиа-запрос. Условие добавляется в круглых скобках.

Max-width: 980px – само условие. Простым языком это означает, что медиа-запрос будет работать, когда ширина экрана составляет максимум 980 пикселей (то есть от 0 до 980рх). Если ширина больше 980, правила не сработают. Чаще всего здесь в качестве условия выступают max-width, min-width, max-device-width, min-device-width. Последние два означают, что правила будут работать только на самих мобильных устройствах (то есть при изменении ширины окна на компьютере горизонтальный скролл появится). Также можно указывать max-height, но это используют очень редко.

{} – в этих фигурных скобках как раз прописываются все css-правила. Их может быть сколько угодно. Приведу сразу пару примеров, чтобы вам было понятно:

@media only screen and (max-width: 980px){ .selector{background: black} } @media only screen and (min-width: 600px){ img{float: left} }

Переводим на человеческий язык: если ширина окна меньше 980 пикселей, то к элементу с классом selector будет применено правило {background: black}. Еще более простым языком – фон этого элемента станет черным.

Второй пример: если ширина окна больше 600 пикселей, то все изображения будут прижаты к левому краю.

До вас уже дошла вся гениальность этого способа верстки? По сути, с помощью медиа-правил вы можем скорректировать существующие или дописать новые css-правила. Таким образом, вы сможем реализовать полностью адаптивный шаблон.

Рис. 2. Пример медиа-запроса, в котором прописываются правила для широкоэкранных мониторов.

Это понятно, но как сделать адаптивную верстку сайта самому? Для этого вам явно недостаточно прописать те два примера. Надеюсь, на них вы поняли суть, но толку от них немного. Нам нужна реальная польза. А ее вы можете получить из . Но это если браться за адаптивность по-серьезному. Дело в том, что поскольку курс платный, то после его изучение вы сами сможете учить других адаптивной верстке.

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

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

Проще всего делать это в браузере. Например, у меня в Google Chrome при нажатии F12 появляется отладчик. Попробуйте теперь изменить размеры окна. В правом верхнем углу вы увидите значение его ширины. Это очень удобно для того чтобы быстро проверить свою верстку. Еще я могу порекомендовать responsivetest.net. Сервис достаточно удобен и отлично проверяет адаптивность.

Рис. 3. При зажатии F12 появляется отладчик. Теперь в правом верхнем углу можно видеть текущую ширину окна при изменении.

Вначале статьи я говорил о том, что существует и другой способ угодить мобильным пользователям – разработать отдельно версии для различных устройств. А вы как думаете, какой способ проще? Реализовать адаптивность намного легче. Это всего лишь пару сотен дополнительных строк кода, а не отдельная версия сайта, которая зачастую сильно отличается по дизайну. Как показывает практика, мобильные версии для своих сайтов делают только крупные компании, которые могут себе позволить потратить больше денег на разработку проекта.

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

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

Если говорить простыми словами, под адаптивной или «отзывчивой» вёрсткой понимают такое расположение блоков и элементов, которое подстраивается под размер и разрешение экрана устройства, при помощи которого страница открыта.

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

Самая критичная величина - это ширина окна браузера. Минимально, на самых бюджетных смартфонах это 240-360px, но в большинстве случаев всё же 480 px и выше. И это более чем в два раза меньше, чем стандарт мониторов с шириной 1024 пикселей.

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

Этого можно достичь на счёт медиа запросов CSS, а так же стилевых свойств ограничивающих минимальную и максимальную ширину и высоту в заданных пределах.

Но всё лучше показать на примере. Давайте сверстаем простой адаптивный макет с минимумом элеменов, внешний вид готового примера можно посмотеть на демо-странице:

Итак, наши требования к его адаптивности таковы:

• Ширина основной части должна растягиваться на больших разрешениях, но до определенной величины, ведь слишком длинные строки не удобно читать.
• При уменьшении ширины браузера изображения должны пропорционально сжиматься, чтобы не выходить за границы области.
• При ширине менее 700 пикселей (минимум – планшет или смартфон с hd экраном в портретной ориентации) три блока внизу должны выстроиться друг за другом и занимать 100% ширины основного блока.
• Так же, при этом левый сайдбар должен сворачиваться, в узкую полосу освобождая место для основной части.
• Предусмотреть кнопку, тап по которой раскрывает и закрывает сайдбар, который теперь должен быть позиционирован над основным блоком, в виде всплывающего меню.

Начнём. Я создал файл index.html, и папки css и images, куда поместил соответственно файл стилей и вырезанные из макета картинки.

В HTML файле создадим два корневых контейнера.left_side и.wrapper соответственно для левого меню и основной части. В.left_side поместим некоторую разметку логотипа, социальных ссылок и ненумерованного списка меню.

В правом основном блоке каждый пост обернём div-ом с классом.text_block, добавим текст-заполнитель с инструмента яндекс-рефераты, и изображения для примера.

В низ добавим три блока.footer_block, обернём их в общий.footer. Статьям добавим заголовки H2, H3, и в итоге получим разметку подобную этой:

Пример адаптивной вёрстки макета. Heaven Web - блог для веб мастера. Блог о веб разработке

• Главная
• Вёрстка
• Jquery
• Drupal
• Другое
• Контакты

Здесь текст с яндекс рефераты...

Ещё некоторое кол-во текста с картинками

При этом построение бренда упорядочивает сублимированный опрос, учитывая результат предыдущих медиа-кампаний.

Исходя из структуры пирамиды Маслоу, лидерство в продажах упорядочивает принцип восприятия, отвоевывая свою долю рынка.

Повышение жизненных стандартов, как следует из вышесказанного, развивает формирование имиджа, не считаясь с затратами.

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

Теперь займёмся стилями CSS. Оформим левый блок:

Left_side{ background: #1d282b; width: 300px; position: fixed; left: 0; top: 0; height: 100%; z-index: 5; } .logo_text{ padding: 20px 10px; color:#ffffff; font-size: 24px; line-height: 30px; font-weight: normal; font-family: myPTNarrow; text-align: center; } .logo_text a{ display: inline-block; } .logo_text span{ color:#72898f; font-size: 18px; line-height: 24px; padding: 0 10px 18px; text-align: center; display: block; } .left_menu{ margin-top: 30px; } .left_menu ul{ display: block; list-style-type: none; } .left_menu li{ display: block; height: 30px; line-height: 30px; } .left_menu li a{ display: block; line-height: 30px; font-size: 18px; font-family: myPTNarrow; color:#ffffff; text-decoration: none; padding-left: 60px; } .left_menu li a:hover{ background: #343e41; } .social_img{ text-align: center; } .social_img a{ display: inline-block; margin: 0 10px; width: 30px; height: 30px; overflow: hidden; } .social_img a:hover{ opacity: 0.7; } .tw_icon{ background: url("../images/social.png") top left no-repeat; } .go_icon{ background: url("../images/social.png") top right no-repeat; } .left_swap{ display: none;/* По умолчанию блок не виден, он показывается, если срабатывает медиазапрос */ position: fixed; width: 50px; left: 0; top: 0; height: 100%; z-index: 6; background: url(../images/swipe.png) #1d282b center 20px no-repeat; }

Здесь для контейнера.left_side мы указали position: fixed. Это свойство позволит блоку всегда оставаться слева (благодаря left: 0; top: 0; и height: 100%;) и не прокручиваться с основным контентом. Чтобы блок наверняка не перекрывался ничем добавим z-index: 5.

Так как ширина левого блока 300 пикселей, то центральный блок (.wrapper) должен иметь внутренний отступ от левого края - padding-left: 300px, чтобы не «попадать» под левое меню.

Общий код центрального блока:

Wrapper{ position: relative; background: #ffffff; min-height: 200%; min-width: 400px; max-width: 1200px; padding-left: 300px; padding-right: 0px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .wrapper a{ color:#576a6f; } .wrapper a:hover{ color:#1d282b; } .text_block{ overflow: hidden; color:#4a4a4a; font-size: 18px; line-height: 24px; min-height: 200px; background: url("../images/hr.png") left bottom repeat-x; padding: 10px 40px 10px; } p{ margin-bottom: 24px; } .cent_img{ display: block; margin: 0 auto 40px; } .auto_img{ display: block; max-width: 100%; margin: 0 auto 24px; }

Здесь самое важное это оформление ширины этого блока. Для.wrapper укажем свойства

Min-width: 480px; max-width: 1200px;

То есть при увеличении экрана в ширину блок будет расширятся вместе с контентом до 1200 пикселей, затем он останется в левой стороне, а справа будет просто фон. При уменьшении же его, сжиматься он будет до 400px, если сильнее – появится горизонтальный скроллинг.

Изображения внутри центрального блока, должны иметь класс.auto_img. Если они не будут умещаться в ширину, то будут пропорционально сжиматься и будут равны 100% ширины контейнера.

Далее разберёмся с медиа запросами СSS. Все такие запросы выглядят следующим образом. Вначале идёт заголовок @media, затем указывается тип устройства на котором требуется применить css код этого запроса. Для обычного цветного экрана это слово screen (или чаще пишут all то есть для всех устройств). Затем в круглых скобках указываются условия и параметры.

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

То есть одно наше условие будет выглядеть вот так:

@media screen and (max-width:800px){ .left_side{ display: none; } .left_swap{ display: block; } .wrapper{ padding-left: 50px; } }

В фигурных скобках мы уже проставили нужные CSS правила, а именно скрываем левое меню, и показываем скрытый ранее вспомогательный узкий левый блок - .left_swap.

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

@media screen and (max-width:720px){ .footer_block{ display: block; width: 96%; } }

Т.е. элементы перестают быть инлайновыми, и становятся блочными, благодаря чему, выстраиваются друг за другом. Свойством width: 96%, мы увеличиваем их ширину до максимума (не до 100%, т.к. у нас сохраняются паддинги – внутренние поля).

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

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

На последок, оформим с помощью jQuery открытие левого меню по клику на свёрнутом узком левом блоке – на.left_swap. Например так:

JQuery(function($) { $(".left_swap").click(function (){ $(".left_side").toggle(); return false; }); })

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

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

PS: В последнее время на блоге очень много спама в комментариях, не всегда успеваю его чистить, но всё равно все ваши комментарии по делу читаю и постараюсь ответить.

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

Пример адаптивной верстки: один и тот же сайт, выглядит интуитивно-понятно на любых устройствах.

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

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

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

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

Пример стандартного сайта:

Пример сайта с адаптивной версткой:

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

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

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

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

Используя данную технологию, дизайн сайта отличается следующими моментами:

• Минималистичный дизайн;
• Отсутствие больших фоновых изображений;
• Не используем Flash (Flash не совместима с мобильными устройствами);
• Количество визуальных элементов минимально, акцент только на главном;
• Меню имеет небольшую вложенность.

Анализируя динамику роста мобильных устройств в интернет-трафике напрашивается вывод, что через 1-2 года более 90% активных пользователей интернета будут использовать мобильные устройства. Кто-то как второй гаджет для выхода в интернет, помимо ноутбука и компьютера, треть - как основной. Оставлять без внимания такую огромную, и что главное, еще пустую, нишу - огромное упущение.

Если раньше была популярна фраза «Если вас нет в интернете - вас нет в бизнесе», то сейчас она становится актуальна по отношению к адаптивной верстке.

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

Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3. Изучил его.
** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **

Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .

Верстал в кодировке «ANSI» , и с полной служебной записью: «HTML 4.01 Transitional» , вместо положенной по правилам HTML5:

Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .

Новый атрибут формы у тэгов input «placeholder» (подсказка) в браузере IE8 НЕ сработал. В остальных — работает .

Аналогично. Новый атрибут «типа» у тэгов input type=»email» срабатывает только в современных браузерах.

Атрибут «value» использовал по-прежнему для внесения значений в формы.

Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head вносится строчка кода:

Такая запись говорит браузеру (**так объясняется в курсе!), чтобы он правильно масштабировал контент страницы под используемое устройство .
Хотя, на самом деле, такая запись браузеру ровным счётом ничего не говорит . Это «обращение» к поисковикам.
А вот они уже о-о-очень «ревностно» относятся к наличию/отсутствию подобной записи в тэге head , особенно в последнее время. Проверено!

Однако, нужно сказать, что современные браузеры мобильных устройств , похоже, научились всё же читать «чужие письма».

**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и … … … . И тут же быстро убрал!

Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал «жуть», т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .

Новый атрибут для тэгов img «srcset» в испытываемой версии «HTML 4.01» не работает!

Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!

Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.

Свойство background-size: cover; лучше НЕ использовать . Рисунки «режутся», т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.

И напротив!

Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для «центровых » рисунков. Оно их великолепно масштабирует под любой размер монитора.

Аналогично.

Это же свойство background-size: contain; сработало ОТЛИЧНО и для «боковых » рисунков, т.е. левых/правых. Пробовал!

Боковые рисунки выводил через тэги span , прописав им float: left или right, но ГЛАВНОЕ!
Главное , что выводил рисунок, как фоновый на 2 символа неразрывного пробела , дав тексту размер, равный высоте фонового рисунка (** уменьшив размер текста, рисунок уменьшается пропорционально, без искажений).

Схемы вывода ниже.