Главная->Новости->Адаптивная верстка: что это и как использовать

Адаптивная верстка: что это и как использовать

03 Нояб 2020г. в 11:12
Просмотров: 931



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

Регулировка разрешения экрана

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

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Частичное решение: делаем все гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

moreflexible

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

Hiding and Revealing Portions of Images;
Creating Sliding Composite Images;
Foreground Images That Scale With the Layout.

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

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

Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.


The Baker Street Inquirer



Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

img {max-width: 100%;}

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.

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

Еще один способ: отзывчивые изображения

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

filamentgroup

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc:



Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Интересная фича для iPhone

В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно.

iphonescale

Для решения данной проблемы используется тег meta:



Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper, #content, #sidebar, #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

style.css (основной):

/* Основные стили, которые будут унаследованы дочерней таблицей стилей */

html,body{
background...
font...
color...
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/* Структурные элементы */
#wrapper{
width: 80%;
margin: 0 auto;

background: #fff;
padding: 20px;
}

#content{
width: 54%;
float: left;
margin-right: 3%;
}

#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}

#sidebar-right{
width: 20%;
float: left;
}
mobile.css (дочерний):

#wrapper{
width: 90%;
}

#content{
width: 100%;
}

#sidebar-left{
width: 100%;
clear: both;

/* Дополнительные стили для нового дизайна */
border-top: 1px solid #ccc;
margin-top: 20px;
}

#sidebar-right{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}

movingcontent

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

Медиазапросы CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. max-width делает противоположное.

Пример:

@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

@media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both;
font-size: 1.3em;
}
}

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:

@media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}

@media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}

@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}

Также значения медиазапросов можно комбинировать:

@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

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





JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:





Опциональное отображение контента

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

diggmobile

К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.

display: none;

display: none используется для объектов, которые нужно спрятать.

Пример:

showinghidingcontent

Вот наша разметка:




Main Content








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

style.css (основной):

#content{
width: 54%;
float: left;
margin-right: 3%;
}

#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}

#sidebar-right{
width: 20%;
float: left;
}
.sidebar-nav{
display: none;
}

Теперь прячем колонки и показываем ссылки:

mobile.css (упрощенный):

#content{
width: 100%;
}

#sidebar-left{
display: none;
}

#sidebar-right{
display: none;
}
.sidebar-nav{
display: inline;
}

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



Оставить комментарий

Ваше имя::


Комментарий::




Renee (2021-09-25 06:41:32)
_________ ____ __________ ______
Stephaine (2021-09-25 13:40:09)
shiba inu, wattpad ____________ _______ ______ ______ okcupid, nina dobrev
Joie (2021-09-26 09:36:12)
yahoo login, unsplash ____________ _______ ______ 10 _____ ________ 365 dni, ?eviri
April (2021-09-26 10:17:02)
skinbaron, udemy ____________ _______ ______ 2021 ______ futbin, consorsbank
Trey (2021-09-18 20:09:22)
https://bit.ly/3Al4wzb
Beau (2021-09-23 10:36:42)
________ _____
Dlak (2020-11-25 14:16:32)
Браво, мне кажется, это великолепная фраза ------ фундамент сочи для частного дома Возьму на свойстрах и риск))) ------ дэс 100 квт Как специалист, могу оказать помощь. Вместе мы сможем найти решение. ------ корейская косметика купить в интернет Конечно. Я присоединяюсь ко всему выше сказанному. Можем пообщаться на эту тему. ------ лайки вк Я считаю, что Вы не правы. Я уверен. Давайте обсудим это. Пишите мне в PM. ------ https://lolz.guru/threads/1996447/ Я конечно, прошу прощения, но это мне совсем не подходит. Кто еще, может помочь? ------ дизельный генератор И что бы мы делали без вашей блестящей фразы ------ cryto news Вы ошибаетесь. Предлагаю это обсудить. ------ очень дешевая накрутка инстаграм Мне кажется это замечательная мысль ------ pokerdom официальный Вы допускаете ошибку. Могу отстоять свою позицию. Пишите мне в PM, пообщаемся. ------ казино mrbit новый адрес зеркало
expobia (2020-12-13 06:52:43)
Kamagra With Food SashAninna cialis 20mg price Invivy Dutas Barato
expobia (2021-05-03 14:32:56)
Katherin (2021-09-28 01:50:11)
____________ _________ - ________________ _________. ________________ _________ ______ ____________ _________. ____________ _ _______ ______________ (_________) ____ __ ______ _ ____________ _________. ____________ _ __________. _______ ______________ _ _________. ______ ____________.
Roosevelt (2021-10-01 22:45:32)
_________ 5 _____ 12 _____
Sherita (2021-10-02 09:49:09)
_____ _____ __________ ______ _________ ______ 9 _________ ______ _______ _ _______ ________ 1080.
Ramiro (2021-11-18 00:42:18)
____ _______ ______ ________ ___________ _____ ______ _ _______ ______ HD 6969
KinogoBlue (2021-12-04 15:39:28)
Часто донимаетесь по вопросом, что надо включить интригующее у ближайшее время? С ресурсе свободного также различных кинофильмов Киного Tomb Raider: Лара Крофт (2018) смотреть онлайн бесплатно пользователи сумеют быстро обнаружить отличный формат киноленты чтимого жанра из содействия интерфейса ориентации, фильтров или ленты поисковой системы. Мы все это определил вместо посетителей затем разработали поиск сериалов еще легче, именно на первой вкладке зрители сможет увидеть вновь свежую фильмы, популярные многосерийное кино к тому же рекордно посещаемое фильмы, а во время когда надумаете оценить краткую нарезку мировых фильмов текущего года, в таком случае переходите у вкладку «Скоро в кинотеатрах» и включайте достаточно новинки кино на киноафише. Короткое воссоздание истории, указанный показатель со стороны наблюдателей также подходящие рассуждения подсказывают зрителю как подготовить фильм, что подойдет вовсе не только Вас, однако возможно всем близким. Кликайте и определите качественные фильмы непременно здесь!
RobertNounk (2021-12-14 03:49:47)
Предлагаю Вам зайти на сайт, где есть много информации на интересующую Вас тему. ----- зачеркнутый текст в инстаграме Советую Вам зайти на сайт, где есть много информации на интересующую Вас тему. Не пожалеете. ----- Экспандер КК 2394.01.013 Могу поискать ссылку на сайт с информацией на интересующую Вас тему. ----- смесь для кислородного коктейля Могу предложить Вам посетить сайт, с огромным количеством информации по интересующей Вас теме. ----- остекление балконов Предлагаю Вам посетить сайт, с огромным количеством информации по интересующей Вас теме. ----- https://www.sadoviy1.ru/mnogoletniki/floks.html Есть сайт, с огромным количеством информации по интересующей Вас теме. ----- https://fabrika-mody.ru/collection/zimnie-kombinezony-2/serebryanye-zimnie-kombinezony-dlya-zhenschin Могу поискать ссылку на сайт, на котором есть много информации по этому вопросу. ----- https://portotecnica.su/category/show/id/208/ Могу рекомендовать Вам посетить сайт, на котором есть много информации на интересующую Вас тему. ----- https://lolz.guru/threads/3256115/ Рекомендую Вам посетить сайт, на котором есть много информации на интересующую Вас тему. ----- https://lolz.guru/threads/102383/ Могу порекомендовать зайти на сайт, где есть много информации на интересующую Вас тему. ----- туи оптом
WilliamVob (2021-12-14 20:12:59)
Жаль, что сейчас не могу высказаться - нет свободного времени. Но вернусь - обязательно напишу что я думаю. ----- тюльпаны опт голландия Жаль, что сейчас не могу высказаться - нет свободного времени. Вернусь - обязательно выскажу своё мнение. ----- орхидеи в горшках в москве Жаль, что сейчас не могу высказаться - очень занят. Но вернусь - обязательно напишу что я думаю. ----- купить воздушные шары на свадьбу Жаль, что сейчас не могу высказаться - очень занят. Вернусь - обязательно выскажу своё мнение. ----- https://azimutpro.ru/catalog/promo_odezhda/ Жаль, что сейчас не могу высказаться - опаздываю на встречу. Но вернусь - обязательно напишу что я думаю. ----- best smm panel Жаль, что сейчас не могу высказаться - опаздываю на встречу. Вернусь - обязательно выскажу своё мнение. ----- купить дешевый аккаунт Жаль, что сейчас не могу высказаться - тороплюсь на работу. Но вернусь - обязательно напишу что я думаю. ----- https://www.mayflor.ru/category/srezannye-tsvety/brassika.html Жаль, что сейчас не могу высказаться - тороплюсь на работу. Вернусь - обязательно выскажу своё мнение. ----- зерновой кофе для кофемашины Жаль, что сейчас не могу высказаться - вынужден уйти. Но вернусь - обязательно напишу что я думаю. ----- накрутка подписчиков в инстаграме 2019
Stanleywaw (2021-12-24 06:58:26)
Онлайн конторы действительно редко задействуют коды, по те что пользователи имеют возможность произвести цифровой счет, однако букмекерская контора Битвинер делает начисление бонусов специально для всех дебютных игроков, каковы из помощью специального промокода смогут извлечь первое взнос личного кармана также 125 процентов вдобавок на депозит. На источнике Betwinner бетвиннер промокод 2022 прописаны совершенно все правила извлечения также применения актуального комбинации, какой содействует игроку просто зайти у казино затем скоропостижно одерживать внушительную выигрыши. Контора Betwinner единственная из вполне признанных букмекерских контор, какие предоставляют не только лишь великую накрутку, однако в плюс систематические призы также бонусы специально для игроков. Именно для того, чтобы получить персональрный начисление в размере двадцать пять тысяч Вам следует пройти регистрацию на ресурсе, во время создания кабинета у клиентов выйдет шанс написать указанный шифр с цифр также спустя пару минут извлечь бонусные средства на вашем счет. Максимально легкие поступки, которые дадут толчок к результату лишь благодаря страничке Betwinner из актуальным паролем.
greenpescom (2021-12-25 13:51:13)
Большинство хотят извлекать привлекательные оферы в лице денежных бонуссов, поэтому популярный спортивный букмекер Мальбет никогда не стоит в сторонке и предлагает специально для своих начальных клиентов единоразовое стимул по виде бонуса в десяти тысяч четыреста купюр виртуальных денег во время введении промокода. Просмотреть промокод вполне просто через данному онлайн-сайт промокод мелбет на сегодня, тот что поэтапно прописывает алгоритм извлечения также использования действующего промокода текущего года, какой дает шанс 100% одержать начисление у размере 10400 рублей после оформления личного кабинета, которые Вы имеет возможность потратить на футбол или другой спорт с огромным соотношением. Здесь на нашем источнике Вы могут просмотреть промокоды специально для извлечения денег на актив в игровые автоматы Malbet или же для предсказания на спорт. Актуальный шифр действует до завершению текущего года, пользователи сумеют ввести код самостоятельно либо скинуть из родными также френдами, какие тоже смогут применить код при регистрирования.
JohnnySnope (2021-12-29 22:06:56)
Могу предложить Вам посетить сайт, на котором есть много информации по этому вопросу. ----- Острые козырьки смотреть онлайн Предлагаю Вам посетить сайт, на котором есть много информации по этому вопросу. ----- все сезоны и серии Элита Советую Вам посетить известный сайт, на котором есть много информации по этому вопросу. ----- hospitals in ukraine Могу предложить зайти на сайт, на котором есть много информации по этому вопросу. ----- Download Instagram Photo Предлагаю Вам зайти на сайт, на котором есть много информации по этому вопросу. ----- https://opt24.store/product-category/katalog/napitki/negazirovannye-napitki/ Советую Вам посмотреть сайт, на котором есть много информации по этому вопросу. ----- bitcoin mixing Могу поискать ссылку на сайт, на котором есть много информации по этому вопросу. ----- cryptocurrency exchanges Могу рекомендовать Вам посетить сайт, на котором есть много информации на интересующую Вас тему. ----- https://bookofra-avtomat.ru/ Рекомендую Вам посетить сайт, на котором есть много информации на интересующую Вас тему. ----- пинап казино зеркало Могу порекомендовать зайти на сайт, где есть много информации на интересующую Вас тему. ----- https://casinomillionb.ru/otzivi_million.html
spbdosukru (2022-01-10 19:05:38)
irongamers (2022-01-21 02:38:23)