Жаропонижающие средства для детей назначаются педиатром. Но бывают ситуации неотложной помощи при лихорадке, когда ребенку нужно дать лекарство немедленно. Тогда родители берут на себя ответственность и применяют жаропонижающие препараты. Что разрешено давать детям грудного возраста? Чем можно сбить температуру у детей постарше? Какие лекарства самые безопасные?
Для начала разберемся, что такое адаптивная верстка? Это такая верстка, при которой сайт отлично отображается на различных устройствах: компьютерах, планшетах, смартфонах.
Пример адаптивной верстки: один и тот же сайт, выглядит интуитивно-понятно на любых устройствах.
Сайт с адаптивным дизайном не теряет в функционале и удобстве пользования (юзабилити) для посетителей. Именно посетители - тот ценный ресурс, ради которого делается сайт, будь то магазин, блог или корпоративный сайт. Важно не только привлечь потенциальных клиентов, но и довести их до цели (покупка, регистрация). Адаптивный дизайн решает эту задачу.
Доля мобильного трафика как в мире, так и в России растет стремительными темпами. С каждым месяцем все больше пользователей просматривают сайты через мобильные устройства. Ведь это легко: пока едешь с работы домой, стоишь в очереди, просто гуляешь - телефон всегда под рукой.
Проблема . Обычный сайт тоже можно просмотреть через телефон, но он теряет всю читабельность, удобство, его нужно постоянно пролистывать, растягивать, приближать. Все это вызывает дискомфорт, шанс, что потенциальный клиент что-то закажет, значительно снижается.
Решение . Заказать сайт с адаптивной версткой, который подстраивается под каждое устройство. Такое решение делает его использование удобным и акцентирует внимание на значимых элементах.
Пример стандартного сайта:
Пример сайта с адаптивной версткой:
В адаптивной верстке применяются современные технологии, благодаря которым все элементы делаются плавающими. Т. е. они могут менять свой размер и расположение на странице сайта в зависимости от размера экрана и устройства с которого их просматривают.
Чем меньше экран - тем более концентрировано подается информация. На смартфонах и планшетах скрывают второстепенные элементы (меню сворачивают, фоновые изображения убирают). В верхней части экрана остаются самые важные элементы управления, менее значимые блоки опускаются вниз.
Вторым важным моментом является увеличение элементов управления. Ссылки и кнопки становятся крупнее, чтобы по ним легко можно было нажать пальцем. На обычных сайтах можно долго пытаться попасть по ссылке, здесь это исключено.
Стоит отметить отсутствие горизонтальной прокрутки. Для продолжения чтения контента достаточно только листать вниз. Сбиться невозможно.
ОсобенностиИспользуя данную технологию, дизайн сайта отличается следующими моментами:
- Минималистичный дизайн;
- Отсутствие больших фоновых изображений;
- Не используем 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Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.
Свойство background-size: cover; лучше НЕ использовать . Рисунки «режутся», т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.
И напротив!
Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для «центровых » рисунков. Оно их великолепно масштабирует под любой размер монитора.
Аналогично.
Это же свойство background-size: contain; сработало ОТЛИЧНО и для «боковых » рисунков, т.е. левых/правых. Пробовал!
Боковые рисунки выводил через тэги span
, прописав им float: left или right, но ГЛАВНОЕ!
Главное
, что выводил рисунок, как фоновый на 2 символа неразрывного пробела
, дав тексту размер, равный высоте фонового рисунка
(**
уменьшив размер текста, рисунок уменьшается пропорционально, без искажений).
Схемы вывода ниже.
5. Нижний колонтитул
В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:
Мой блог © 2016 Написать письмо $(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });
6. Общие CSS-стилиОбщие стили, сброс стилей браузера по умолчанию:
*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/ } ul { list-style: none; } a { text-decoration: none; outline: none; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; } body { font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; } /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { content: ""; display: table; clear: both; } /* стилевой класс, который управляет шириной контейнера сетки*/ .container { margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px; }
7. Стили для шапки и её содержимого header { width: 100%; background: white; box-shadow: 3px 3px 1px rgba(0,0,0,.05); padding: 15px 0; margin-bottom: 30px; position: relative; } /* логотип */ .logo { display: block; float: left; } .logo span { color: white; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 5px 0; text-align: center; text-shadow: 2px 2px 1px rgba(0,0,0,.4); } .logo span:nth-child(odd) { background: #EF5A42; } .logo span:nth-child(even) { background: #F8B763; } /* меню */ #menu { float: right; } #menu li { display: inline-block; margin-right: 30px; } #menu a { color: #111; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; line-height: 40px; } #menu a:hover { color: #EF5A42; } #menu li:last-child { margin-right: 0; } /* форма поиска */ #searchform { float: right; margin-left: 46px; display: inline-block; position: relative; } #searchform input { width: 170px; float: left; border: none; padding-left: 10px; height: 40px; overflow: hidden; outline: none; color: #9E9C9C; font-style: italic; } #searchform button { background: transparent; height: 40px; border: none; position: absolute; right: 10px; color: #EF5A42; cursor: pointer; font-size: 18px; } #searchform input:focus { outline: 2px solid #EBEBE3; } /* кнопка переключения меню, появляющаяся при ширине 768px */ .nav-toggle { display: none; position: relative; float: right; width: 40px; height: 40px; margin-left: 20px; background: #EF5A42; cursor: pointer; } .nav-toggle span { display: block; position: absolute; top: 19px; left: 8px; right: 8px; height: 2px; background: white; } .nav-toggle span:before, .nav-toggle span:after { content: ""; position: absolute; display: block; left: 0; width: 100%; height: 2px; background: white; } .nav-toggle span:before { top: -10px; } .nav-toggle span:after { bottom: -10px; } /* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/ #menu.active { max-height: 123px; } 8. Стили для блока с основным содержимым /* левый контейнер */ .posts-list { margin-bottom: 30px; width: 64%; float: left; } /* блок для статьи */ .post { margin-bottom: 35px; } .post-content p { line-height: 1.5; padding-bottom: 1em; } .post-image { margin-bottom: 30px; } .category { margin-bottom: 15px; } .category a { color: #F8B763; text-transform: uppercase; } .post-title { margin-bottom: 12px; font-size: 26px; } /* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */ .post-footer { border-top: 1px solid #EBEBE3; border-bottom: 1px solid #EBEBE3; position: relative; margin-top: 15px; } .more-link { position: relative; display: inline-block; font-size: 10px; text-transform: uppercase; color: white; line-height: 44px; padding: 0 22px; background: #3C3D41; letter-spacing: 0.1em; white-space: nowrap; } .more-link:after { content: ""; display: block; position: absolute; width: 0; height: 0; top: 0; right: 0; border: solid transparent; border-width: 22px 18px; border-left-color: #3C3D41; transform: translateX(100%); } .post-social { position: absolute; left: auto; top: 50%; right: 0; text-align: right; transform: translateY(-50%); padding: 0; font-size: 12px; } .post-social a { display: inline-block; margin-left: 8px; color: #F8B763; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 50%; border: 1px solid; } 9. Стили для боковой колонки /* правый контейнер */ aside { width: 33%; float: right; } /* блок для виджетов */ .widget { padding: 20px 15px; background: white; font-size: 13px; margin-bottom: 30px; box-shadow: 3px 3px 1px rgba(0,0,0,.05); } .widget-title { font-size: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid #F8B763; box-shadow: 3px 3px 0 0 #F8B763; } .widget-category-list li { border-bottom: 1px solid #EBEBE3; padding: 10px 0; color: #c6c6c6; font-style: italic; } .widget-category-list li:last-child { border-bottom: none; } .widget-category-list li a { color: #626262; margin-right: 6px; font-style: normal; } .widget-category-list li a:before { content: "\f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; color: #c6c6c6; } .widget-posts-list li { border-top: 1px solid #EBEBE3; padding: 15px 0; } .widget-posts-list li:nth-child(1) { border-top: none; } .post-image-small { width: 30%; float: left; margin-right: 15px; } .widget-post-title { float: left; } /* форма подписки */ #subscribe { position: relative; width: 100%; padding: 15px 0; } #subscribe input { width: 100%; display: block; float: left; border: 2px solid #EBEBE3; padding: 0 0 0 10px; height: 40px; position: relative; outline: none; color: #9E9C9C; font-style: italic; } #subscribe button { padding: 0 15px; background: transparent; height: 40px; border: none; position: absolute; right: 0; color: #EF5A42; cursor: pointer; font-size: 18px; } #subscribe input:focus + button { background: #EF5A42; color: white; } 10. Стили для нижнего колонтитулаПодвал сайта разделим на три равных столбца:
Footer { padding: 30px 0; background: #3C3D41; color: white; } .footer-col { width: 33.3333333333%; float: left; } .footer-col a { color: white; } .footer-col:last-child { text-align: right; } .social-bar-wrap { text-align: center; } .social-bar-wrap a { padding: 0 7px; font-size: 18px; }
11. Медиа-запросы @media (max-width: 768px) { /* показываем кнопку для переключения верхней навигации */ .nav-toggle { display: block; } header { padding: 10px 0; } /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ #menu { max-height: 0; background: white; float: none; position: absolute; overflow: hidden; top: 63px; right: 0; left: 0; margin: 0; padding: 0; z-index: 3; } /* делаем элементы списка блочными, чтобы они располагались друг под другом */ #menu li { display: block; text-align: center; border-bottom: 1px solid #EBEBE3; margin-right: 0; } /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ .posts-list, aside { width: 100%; float: none; } .widget-post-title { font-size: 1.5em; } } @media (max-width: 480px) { /* отменяем обтекание для логотипа и выравниваем по центру*/ .logo { float: none; margin: 0 auto 15px; display: table; } .logo span { margin: 0 2px; } /* позиционируем меню на увеличившуюся высоту шапки */ #menu { top: 118px; } /* позиционируем форму поиска по левому краю */ #searchform { float: left; margin-left: 0; } /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ .post-footer { border-top: none; border-bottom: none; text-align: center; } /* отменяем позиционирование кнопок соцсетей */ .post-social { position: static; text-align: center; transform: none; margin-top: 20px; } .widget-post-title { font-size: 1.2em; } /* отменяем обтекание для столбцов подвала страницы */ .footer-col { float: none; margin-bottom: 20px; width: 100%; text-align: center; } .footer-col:last-child { text-align: center; margin-bottom: 0; } } 12. Скрипт для мобильного менюЗа показ-скрытие верхнего меню при клике на кнопку (переключается высота меню - от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом :
$(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });
От автора: доброго времени суток всем нашим гостям и подписчикам! Верстка сайтов - это дело интересное и непростое. Здесь намного важнее практика и опыт, чем полученный диплом. Все чаще в вакансиях по поиску верстальщика указывают одним из требований знание того, что такое адаптивная верстка - уроки по отзывчивому веб-дизайну и адаптивной верстке присутствуют в интернете в огромном количестве, однако, достаточно ли их для начала карьеры? Попытаемся разобраться в нашей сегодняшней статье.
Напомним, что верстальщик - это человек, который должен сделать так, чтобы веб-страница выглядела точно так же, как и ее дизайн-макет в формате psd. В этом деле ему помогают языки разметки XHTML/ .
Верстальщик не просто создает код каждой детали сайта - от этого хорошего человека также напрямую зависит то, как сайт отображается во всех популярных браузерах. А отображаться сайт в них должен так, чтобы любо-дорого глянуть было. Причем, на всех устройствах и во всех браузерах. Это свойство адаптивной верстки называется мультиплатформенностью.
Все блоки должны подстраиваться под высоту и ширину экрана, элементы не должны «съезжать», куда ни попадя. Наверняка, каждый из вас видел такие сайты, на которых при открытии на смартфоне видишь элементы (текст, логотип, картинки), которые сбились в кучки, словно испугались вас, большого и злого дядю (или тетю). Выглядит это не очень эстетично, согласитесь.
Чем отличается адаптивная верстка от других подходов к верстке сайта?Существует несколько подходов, которые вы должны знать, прежде чем обучаться адаптивной верстке:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
фиксированная верстка. Блоки не поменяют свою ширину даже при изменении размера окна браузера. При просмотре сайта на мониторе с низким расширением появится полоса прокрутки;
Так как мобильное устройство не всегда подключено к сети wi-fi и зачастую использует медленный мобильный интернет, сайты следует делать максимально легкими при загрузке. Тут-то на помощь и приходит адаптивная верстка, благодаря которой веб-страницы отлично загружаются на небольшие экраны даже при медленном интернете..
С точки зрения SEO адаптивная верстка также имеет свои преимущества. Здесь соблюдается принцип «один сайт - один адрес», в отличие от варианта с созданием мобильной версии. В случае с мобильной версией приходится отдельно нарабатывать репутацию и посещаемость ресурса. Так как страницы мобильных версий часто «склеены» с основными сайтами, они не очень хорошо ранжируются поисковиками. Адаптивный дизайн и верстка позволят всю ссылочную массу сосредоточить на одном единственном ресурсе.
Что нужно знать специалисту по адаптивной верстке.Чтобы научиться адаптивной верстке, следует иметь хороший уровень знания HTML, CSS и . Отвечая на вопрос, заложенный в теме статьи: теорию нужно совмещать с практикой уже с начала обучения. Идеальный вариант - это видео уроки по адаптивной верстке, делающие упор на практические занятия, сложность которых растет по мере изучения основ.
К минимальному пакету джентльмена верстальщика также относится Adobe Photoshop и основы работы с изображениями. Если вы готовитесь верстать проекты не крупнее одностраничников, то можете использовать Adobe Muse и подобные ему инструменты.
Базовые навыки верстки приобретаются достаточно быстро. Разобраться с HTML и CSS не займет много времени. Вначале могут быть сложности с осваиванием JavaScript, однако, они компенсируются наличием огромного количества плагинов и других готовых решений на все случаи жизни.
Где находится грань между версткой, веб-дизайном и фронтендом?Несмотря на то, что верстальщик - это связующее звено между веб-дизайнером и программистом, он играет важнейшую роль в создании сайта, и полномочия в этой роли зачастую довольно нечеткие, соответствующие функциям других специалистов.
Когда необходимо разработать сложный интерактивный интерфейс, от верстальщиков требуют определенных . Здесь даже может понадобиться тесная работа с базами данных. Как вы поняли, грань между Front-End и версткой очень и очень тонкая.
Или могут заставить верстать макет веб-дизайнера, который вообще не представляет, что с его макетом дальше делают, и которому глубоко плевать на ваши проблемы. А это, поверьте мне, довольно распространенная ситуация. Верстальщику часто приходится группировать слои в psd шаблоне и вообще наводить в нем порядок.
Фреймворки и препроцессоры: быть или не быть?Использование CSS фреймворков играет очень важную роль в скорости верстки. Возможно, сейчас начнутся недовольные возгласы самобытных верстальщиков 80 лэвла, которые считают, что могут сделать сетку проекта в сто раз лучше Бутстрэпа. Им поддакнут противники чрезмерной стандартизации и ограничений в веб-дизайне. Ну что ж, я никого переубеждать не буду. Мы тут не картины на холсте рисуем.
Сетка - это крепкая основа адаптивной верстки. Проект без сетки - это головная боль веб-разработчика и благоприятная среда для размножения HTML-костылей. А так как мы собираемся быть , значит, будем использовать только максимально эффективные и быстрые инструменты. Естественно, не в ущерб качеству.
Для тех, кто никогда не слышал о фреймворке Bootstrap или относился к нему скептически, советую присмотреться. Особенно, если вы цените скорость загрузки и удобство сайта. С помощью можно создать отзывчивый, адаптивный шаблон с классной сеткой.
Еще один совет: экономьте время на написание CSS с помощью препроцессора. И это очень важно, независимо, используете вы какой-нибудь фреймворк, или нет. Так как 60-70% верстки занимает написание CSS, этот этап логично автоматизировать. Я лично пользуюсь препроцессором Sass, однако, вы можете использовать любой другой, что вам подходит.
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
В настоящее время посетители заходят на сайты не только с настольного компьютера, но и с ноутбука, планшета, смартфона. При этом на устройствах с маленьким экраном часто текст слишком мелкий, ссылки практически некликабельны, элементы управления расположены слишком близко друг от друга.
Чтобы устранить эти недостатки стали разрабатывать отдельные мобильные версии сайтов. Но это долго, дорого и неудобно в поддержке.
Решение возникшей проблемы – адаптивная верстка , при которой CSS-стили меняются динамически для разной ширины окна браузера.
ПримерПример адаптивной верстки - сайт domportretov.ru , где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:
Разработку адаптивной верстки чаще всего проводят от уже существующего сайта для большого экрана к экранам меньшего размера. Проверять результат работы можно разными способами:
Мобильные браузеры по умолчанию принимают страницу сайта за страницу для обычного компьютера и масштабирует ее по ширине экрана телефона. В результате текст становится мелким, и посетителю, чтобы его прочесть, приходится увеличивать масштаб страницы.
Для корректировки размеров и масштабирования страницы с учетом ширины экрана устройства используют метатег viewport , который содержит инструкции для браузера.
Чтобы сообщить браузеру, что страница адаптируется к любым устройствам, в заголовок документа добавляют метатег viewport.
Пример Основные свойства метатега| width | Ширина видимой области. Рекомендуемое значение: device-width. |
| height | Высота видимой области. Рекомендуемое значение: device-height. |
| initial-scale | Первоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1. |
| minimum-scale | Минимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы. |
| maximum-scale | Максимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы. |
| user-scalable | Разрешает или запрещает возможность масштабирования страницы. Принимает значение true или false. |
Контент шире экрана – часто возникающая проблема, как только задан viewport.
Это происходит, если каким-то элементам задана большая фиксированная ширина.
Чтобы не появлялась горизонтальная прокрутка, ширину страницы задают на весь экран, при необходимости ограничивая ее свойством max-width.
Пример .content { width: 100%; max-width: 1200px; } Медиа-запросы. CSS-стандарт Media QueriesВозможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries .
Медиа-запрос начинается с правила @media , после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all ), логического оператора (and ) и медиа-функции (max-width: 360px ).
Типы носителей| all | Все типы. |
| Принтеры и другие печатающие устройства. | |
| screen | Экран монитора. |
| speech | Речевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры. |
| Устаревшие, хотя и корректные типы, которые не дают результата | |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Наладонники, смартфоны, устройства с малой шириной экрана. |
| projection | Проекторы. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Задан размер заголовка:
H1 { font-size: 72px; }
На большом экране компьютера такой заголовок смотрится нормально, но для вертикального экрана смартфона он слишком крупный. Для экранов, ширина которых меньше или равна 360px, можно уменьшить размер шрифта с помощью медиа-запроса:
@media all and (max-width: 360px) { h1 { font-size: 42px; } }
Новые единицы размеров (vw, vh, rem)| vw | 1% от ширины окна браузера (viewport). |
| vh | 1% от высоты окна браузера (viewport). |
Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.
Пример body { min-height: 100vh; }Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.
Пример html { font-size: 10px; } body { font-size: 1.6rem; } h1 { font-size: 7.2rem; } @media all and (max-width: 360px) { body { font-size: 1.4rem; } h1 { font-size: 4.2rem; } }Сейчас принято занимать всю ширину окна браузера. При этом активно используются горизонтальные списки, которые хорошо смотрятся и удобно читаются на экране настольного компьютера. Но на экране мобильного устройства элементы такого списка становятся слишком узкими. Надо превращать горизонтальный список в вертикальный.
Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).
Пример ul.flex { display: flex; /* flex-контейнер */ flex-wrap: wrap; /* многострочный режим */ justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */ } li.flex { display: inline-block; flex-basis: 260px; /* базовая ширина элемента */ flex-grow: 1; /* все элементы одинаковой ширины */ max-width: 300px; padding: 8px; }В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):
На узком экране список станет вертикальным:
Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.
Я не являюсь профессионалом в области дизайна и верстки сайтов. В основном вся моя деятельность в этом направлении сводится к небольшим правкам существующих шаблонов. Но однажды мне очень захотелось разобраться «как это работает» и я собрал в одну статью набор базовых правил по созданию адаптивного шаблона сайта.
Понятие адаптивностиПод адаптивностью следует понимать такую верстку сайта при которой внешний вид сайта меняется в зависимости от разрешения и ориентации экрана устройства на котором этот сайт просматривают. При этом все изменения вносятся для удобства пользования таким сайтом на мобильных устройствах.
Адаптивная верстка позволяет одинаково удобно просматривать сайт не только на мониторе компьютера, но и на экране мобильного телефона (смартфона) без потери функциональности.
Медиазапросы адаптивной версткиДля изменения верстки сайта и соответствующего оформления стилей используются медиазапросы, которые активируют тот или иной код в зависимости от ширины экрана. Чтобы медиа-запросы работали и шаблон получился адаптивным, нужно поместить в шапку сайта в секцию HEAD следующую строку кода:
Основные принципы адаптивности
Так как размер экрана мобильных устройств (смартфоны, планшеты) заметно меньше экрана монитора компьютера как по размеру, так и по разрешению. То основная задача адаптивного дизайна уменьшить ширину страницы сайта для мобильных посетителей.
А достигается это двумя путями:
Классический пример — это перемещение боковой колонки сайдбара под основной контент.
При этом ширина сайдбара стала равна ширине основного контента и они оба в свою очередь растянулись на всю ширину экрана.
Как убрать блок сайдбара в зависимости от ширины экранаНачну с того, что разметка большинства современных шаблонов реализована с помощью блоков . Для горизонтального расположения используются, так называемые, плавающие блоки, то есть со стилем FLOAT . Соответственно, для отмены горизонтального расположения блоков при просмотре на мобильных устройствах нужно удалить плавающий стиль блоков.
В простейшем случае CSS код будет выглядеть так:
@media only screen and (max-width: 1199px) { .content{float: none;} .sidebar{float: none;} }
Располагать его следует в конце файла стилей, как минимум после оформления для отображения на стационарных компьютерах.
Пояснения к коду: в первой строке мы говорим, что нижеследующие стили будут применяться к устройствам с шириной экрана до 1199 пикселей включительно. Для таких устройств сайдбар перестает быть плавающим блоком и отображается в порядке его очередности в HTML коде сайта. Поэтому, если вы хотите, чтобы сайдбар отображался после контента, необходимо чтобы код сайдбара был ниже кода основного контента, например так:
... ...
Автоматическая ширина блока — резиновая версткаТак же следует поработать с шириной блоков контента и сайдбара. Необходимо сделать их «резиновыми» при просмотре на мобильных клиентах:
@media only screen and (max-width: 1199px) { .content {width:100%;} .sidebar {width:100%;} }
При указанных выше стилях, блоки будут растягиваться на всю ширину экрана.
Адаптивные картинки для сайтаПосле того как мы изменили размещение и размер блоков следует позаботиться об остальных элементах сайта. Ведь многие из низ могут просто не поместиться на экране, например изображения. Для их адаптации к мобильным клиентам применяем следующий код:
Img {max-width:100%; height: auto;}
Проблема длинных словИногда горизонтальная полоса прокрутки может появиться и от очень длинного слова, когда оно не помещается на экране. Например это может быть URL-адрес оставленный в комментарии. Подробнее об этой проблеме и ее решении я писал ранее: . CSS-код для устранения проблем с адаптивностью будет выглядеть так:
Hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
Адаптивное меню сайтаМеню сайта, особенно если в нем много пунктов, также желательно адаптировать, так как оно может занимать значительную часть экрана. Чтобы максимально освободить экран для контента меню обычно скрывают и показывают вместо него кнопку (ссылку), при нажатии на которую меню будет показано на экране.
Чтобы реализовать задуманное необходимо создать два взаимоисключающих объекта. К примеру основное меню должно быть скрыто на мобильных экранах, но при этом должна появиться кнопка открывающая это меню. На экранах компьютеров наоборот: основное меню должно быть видно, а кнопка его вызова скрыта.
На CSS это реализуется очень просто.
#mainmenu {display:block;} #mobilemenu{display:none;} @media only screen and (max-width: 1199px) { #mainmenu {display:none;} #mobilemenu{display:block;} }
Как только ширина экрана станет меньше 1200 пикселей, то основное меню исчезнет с экрана, а появится ссылка на его открытие (точнее будет показан блок со ссылкой или кнопкой).
Обратите внимание, что в данном случае используются ID блоков, а не класс стилей. И код основного меню будет выглядеть примерно так:
<div id="mainmenu">Основное меню сайта
Чтобы показать основное меню по нажатию на кнопку, добавим небольшой скрипт в секцию HEAD :
function showmobilemenu() { if (document.getElementById("mainmenu").style.display == "block") {document.getElementById("mainmenu").style.display = "none"} else {document.getElementById("mainmenu").style.display = "block"} }
