Katcerina.ru

Деньги в сети
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать адаптивный сайт html

Основы адаптивного веб — дизайна (Responsive). Или как сделать простой шаблон адаптивным.

Здравствуйте, дорогие читатели блога. Сегодня я с Вам хотел бы поговорить об основах адаптивного дизайна (responsive), а так же разложить по полочкам один из примеров, который я подготовил.

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

Что такое адаптивный веб-дизайн?

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

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

Немного теории (Основы)

Как известно, что весь веб дизайн большую часть строится на CSS, в CSS задаётся практически все правила отображения сайта в различных браузерах. Соответственно и адаптивный веб — дизайн не исключение. Самое главное это стандартное правило media queries, в которых и задаются все новые классы под желаемое разрешение экрана. Но и конечно же стандартная CSS вёрстка не много изменилась. Самое большое изменение это использование процентов а не пикселей в ширине объектов.

Например: Размер блока главного контента на странице был равен 600px, а ширина блока сайдбара 400px. В адаптивном дизайне данные значения нужно прописывать в процентах. Исходя из этого у нас получится ширина контента 60%, а ширина сайдбара 40% Надеюсь, что суть Вы уловили.

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

max-width и width: если ширина сайта равна width:1000px то при уменьшении окна браузера будет появляться горизонтальная полоса прокрутки, другими словами сайт просто не будет влазить в окно. И его придётся горизонтально прокручивать чтобы увидеть весь сайт. Но если мы поставим width:100% Сайт растянется на всю ширину монитора. На малых разрешениях такой способ будет смотреться нормально, а вот на мониторах с большим разрешением сайт очень сильно растянется и будет совершенно не читабельным. Таким образом если Вы хотите чтобы сайт остался шириной в 1000px, но к тому же чтобы не появлялась горизонтальная полоса прокрутки, нужно применить max-width.

Вот что у нас было:

А вот что стало

Теперь наш блок станет резиновым, который будет такого размера как и окно браузера, но если ширина достигнет в 1000 пикселей блок перестанет растягиваться.

min-width и width: Тут совершенно всё наоборот, если в первом случае мы избавлялись от горизонтальной полосы прокрутки, то тут мы её возвращаем. Другими словами, если резиновый блок шириной в 100% при уменьшении разрешения будет подстраиваться под окно браузера, чем меньше окно тем и меньше сам блок. min-width может установить значение ширины блока после которого он перестанет уменьшаться. Например, если установить min-width: 200px; то блок при достижении данной ширины перестанет уменьшаться, таким образом будет появляться горизонтальная полоса прокрутки в окне браузера.

Практика

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

Данный шаблон состоит из трёх блоков — это шапка сайта, главный контент и сайдбар. Таким образом у меня получились блоки к которым я присвоил соответствующие ID CSS:

Шапка сайта — #headerInner

Главный контент — #colLeft

Как проверить?

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

Ну а сейчас давайте посмотрим и разметку html, она довольно проста:

Адаптивная верстка сайта: гайд для начинающих

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

Из этой статьи вы узнаете:

  1. Что такое адаптивная верстка сайта
  2. Зачем нужен адаптивный дизайн сайта
  3. Чем адаптивная верстка лучше мобильного приложения
  4. Основы адаптивной верстки сайта
  5. Как её грамотно сделать
  6. Адаптивная верстка шапки сайта и главной страницы
  7. Как проверить результат работы
  8. Типичные ошибки адаптивной верстки сайта

Адаптивная верстка сайта – что это такое

Адаптивная верстка сайта, или mobile-friendly, заключается в выполнении определенных функций, направленных на создание веб-страницы, способной подстроиться под любое разрешение экрана.

На заре своей деятельности верстальщики создавали несколько вариантов веб-страниц, чтобы сайт мог отображаться на устройствах с разным разрешением окна (это продолжалось вплоть до 2010 года). Позже для решения данных задач стали применять JavaScript (специализированный язык программирования).

Сегодня адаптивная верстка сайта проводится путем использования каскадных таблиц CCS3 и языка разметки HTML5.

Рекомендуем

Зачем вам адаптивный дизайн сайта

В Интернет можно выходить при помощи устройств с разным разрешением экрана

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

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

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

Читать еще:  Адаптивный сайт как сделать

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

Рекомендуемые статьи по данной теме:

Экстренная информация

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

Чем адаптивная верстка сайта лучше мобильного приложения

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

  1. Мобильное приложение/версия сайта должны соответствовать типу операционной системы. Чтобы это стало возможным, необходимо потратить лишние деньги и время.
  2. Мобильное приложение надо загрузить. Чтобы иметь возможность использовать приложение, его надо установить. Естественно, пользователь это сделает, но только в том случае, если будет уверен, что оно ему необходимо для регулярного использования, а если нет, то это чревато для вас потерей аудитории.
  3. Распределение трафика. Использование мобильного приложения не считается показателем посещаемости сайта. Иначе говоря, трафик приложения и трафик сайта не суммируются, а это снижает показатели посещаемости.
  4. Интеграция материалов сайта. Если у вас есть мобильное приложение, то необходимо затрачивать дополнительные ресурсы, чтобы синхронизировать все материалы, или наполняя сайт, дублировать контент в приложении (опять же, лишняя работа, а значит, и расходы).

Чем адаптивная верстка сайта лучше мобильного приложения? Тем, что верстка подразумевает использование одного адреса ресурса и единую систему его управления и наполнения, а приложение – нет.

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

Рекомендуем

Основы адаптивной верстки сайта

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

Если возникает необходимость, то сокращаются информационные блоки, остается только самые важные данные. Гайд для начинающих может включать следующее:

  • mobile first – проектирование для мобильных устройств;
  • flexible, grid-based layout – использование гибкого макета, основанного на сетке;
  • flexible images – применение гибких изображений;
  • media queries – обработка меди-запросов;
  • постепенная реализация улучшений.

Адаптивные макеты могут быть следующих типов:

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

  • Перемещение блоков.

Этот способ подходит для сайта с большим количеством колонок. Расположение сайдбаров (дополнительных блоков) меняется в зависимости от ширины экрана: экран уменьшается – сайдбары перемещаются вниз макета.

  • Переключение макетов.

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

  • Элементарная адаптивная верстка сайта.

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

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

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

Рекомендуем

Как сделать адаптивную верстку сайта

Перед тем как ответить на вопрос: «Как делается адаптивная верстка сайта?», необходимо иметь представление о том, какие технологии для этого используются. Сегодня это HTML5 и CSS3.

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

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

После появления CSS3 у верстальщиков появилась возможность создания разных классов, которые будут соответствовать определенному разрешению экрана (правило «media queries»).

Людям, планирующим использовать третье поколение каскадных таблиц (CSS3), стоит принять во внимание, что размеры объектов указываются в процентном соотношении (в отличие от CSS2, где размер указывается в пикселях).

HTML5 используется для указания местоположения конкретных элементов, то есть для разметки страницы. Классы, созданные путем применения CSS3-технологии, указываются в параметрах тегов HTML, чтобы выводимые объекты могли подстроиться под разрешение.

Адаптивная верстка сайта начинается с создания простого изображения, которое растянется по размеру экрана.

  • HTML

Ничего сложного: просто создали контейнер для «упаковки» картинки.

Адаптивный сайт

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

Сначала разберём его особенности. Адаптивность классно дополняет резиновый дизайн. Ведь посмотрите, что происходит, если шаблон чисто резиновый.

Допустим на странице, по горизонтали у Вас расположено два, или даже больше блоков, или изображений.

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

Вот тут и приходит на выручку адаптивный дизайн.

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

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

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

Таким способом можно на маленьком экране, расположить в один столбик вообще весь контент.

То есть сначала будет идти текст, после него боковые колонки, или сначала какой либо блок меню, потом текст, потом sidebar, и так далее.

Окончательный вариант выбирать Вам, в зависимости от задач, которые Вы ставите перед сайтом.

Суть, думаю ясна, перейдём к технике исполнения.

Присвоение свойств адаптивности выполняется при помощи медиазапроса. Выглядит он так (синтаксис):

Где screen — экран;

(min-width: X px) — свойства экрана, то есть ширина;

selector — селектор того элемента, который будет перемещаться;

property — свойство этого элемента;

value — новое значение этого свойства;

Пользователям WordPress, и не только, эта конструкция должна быть знакома, так как присутствует в 90% шаблонов, в файле style.css.

Вопрос только — каким элементам, какие свойства там заданы.

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

1280 х 800 — ноутбук;

600 х 1024 — планшет в книжном формате

1024 х 600 — планшет в альбомном формате

320 х 480 — смартфон в книжном формате

480 х 320 — смартфон в альбомном формате

240 х 320 — мобильный телефон в книжном формате

320 х 240 — мобильный телефон в альбомном формате

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

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

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

Вообще-то для ноутбука будет достаточно задать минимальную ширину, и не грузиться перестановкой элементов, так что начинать можно с ширины в 600 или 480 px.

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

Ведь какой-то сайт можно сжать побольше, без потери читабельности, а какой-то нет.

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

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

.header <
height : 80px ;
background : #25b33f ;
margin-bottom : 5px ;
>

.sidebar1 <
height : 120px ;
background-color : #2ff553 ;
margin-bottom : 10px ;
width : 20% ;
position : absolute ;
top : 90px ;
left : 5px ;
>

.sidebar2 <
height : 120px ;
background-color : #2FF553 ;
margin-bottom : 10px ;
width : 20% ;
position : absolute;
top : 90px ;
right : 5px ;
>

.content <
height : 120px ;
background : #9ef7af ;
margin : 0 auto ;
width : 59% ;
>

.blok1, .blok2, .blok3, .blok4 <
float : left ;
margin : 3px 3px 3px 5px ;
width : 22% ;
height : 25% ;
padding : 5px ;
text-align : center ;
border : 2px solid ;
>

.footer <
height : 80px ;
background : #41874e ;
margin : 5px 0 0 0 ;
>
/style >
/head >
body >
div id =» wrapper «>
div class =» header «> /div >
div class =» content «>
div class =» blok1 «>Блок 1 /div >
div class =» blok2 «>Блок 2 /div >
div class =» blok3 «>Блок 3 /div >
div class =» blok4 «>Блок 4 /div >
/div >
div class =» sidebar1 «> /div >
div class =» sidebar2 «> /div >
div class =» footer «> /div >
/div >
/body >
/html >

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

Рассмотреть содержимое в таком случае будет очень трудно. Да Вы и сами можете в этом убедиться.

Вставьте данный код в Notepad++, откройте картинку в браузере, и попробуйте уменьшать ширину экрана.

Не очень-то, правда? Давайте адаптировать.

Сначала маленький совет. Чтоб было удобнее контролировать ширину экрана в браузере Chrome, нажмите клавишу F12, появится веб-инспектор.

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

Итак, начнём с размера экрана в 480 px. Первым делом отменим позиционирование боковых колонок, чтоб они заняли своё, определённое в html коде, место под контентом.

И зададим им ширину так, чтоб они потом, с учётом отступов, разместились рядом друг с другом.

Для этого в тег style, в самом конце добавляем медиазапрос:

Уменьшаем экран до 480 px.

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

Осталось выровнять боковые колонки, и блоки в контенте. Добавляем туда же стили и для них.

Вот такой у меня получился макет.

Для следующего размера, создаётся ещё один медиазапрос, и так далее.

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

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

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

Если повлияет, то нужно это свойство отменить в запросе.

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

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

Я Вам показал только основные принципы, чтоб понимать, как это делается, а уж оттачивать мастерство нам предстоит самостоятельно.

Желаю творческих успехов.


Перемена

Адаптивная верстка

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

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

Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

Пример адаптивной верстки — сайт domportretov.ru, где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:


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

  1. просто менять размер экрана браузера,
  2. расположить справа панель инспектора компонентов и менять ее ширину,
  3. использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.
Что используют для оптимизации сайта под мобильные устройства?

Метатег viewport

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

Для корректировки размеров и масштабирования страницы с учетом ширины экрана устройства используют метатег 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.

Пример

Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries.

Медиа-запрос начинается с правила @media, после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all), логического оператора (and) и медиа-функции (max-width: 360px).

Типы носителей
allВсе типы.
printПринтеры и другие печатающие устройства.
screenЭкран монитора.
speechРечевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
Устаревшие, хотя и корректные типы, которые не дают результата
brailleУстройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossedПринтеры, использующие для печати систему Брайля.
handheldНаладонники, смартфоны, устройства с малой шириной экрана.
projectionПроекторы.
ttyУстройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tvТелевизоры.
Логические операторы
andЛогическое И. Указывается для объединения нескольких условий.
notЛогическое НЕ. Указывается для отрицания условия. Оператор not оценивается в запросе последним.
onlyКлючевое слово для старых браузеров, не поддерживающих медиа-запросы и считающих only типом носителя. Но так как такого типа не существует, то весь стиль целиком игнорируется. Современные браузеры воспринимают медиа-запрос с only и без only одинаково.
,Логическое ИЛИ. Перечисление нескольких условий через запятую означает, что если хотя бы одно условие выполняется, то стиль будет применён.
Основные медиа-функции
width
(min-width, max-width)
Ширина окна браузера.
device-width
(min-device-width, max-device-width)
Ширина экрана устройства.
height
(min-height, max-height)
Высота окна браузера.
device-height
(min-device-height, max-device-height)
Высота экрана устройства.
orientationОриентация устройства. Принимает значения portrait (портретная), если ширина меньше высоты или landscape (альбомная), если ширина больше высоты.
Пример

Задан размер заголовка:

На большом экране компьютера такой заголовок смотрится нормально, но для вертикального экрана смартфона он слишком крупный. Для экранов, ширина которых меньше или равна 360px, можно уменьшить размер шрифта с помощью медиа-запроса:

Новые единицы размеров (vw, vh, rem)

vw1% от ширины окна браузера (viewport).
vh1% от высоты окна браузера (viewport).

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример

Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример

Flexbox

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

Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример

В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

На узком экране список станет вертикальным:

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

Адаптивная верстка таблиц

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

Ссылка на основную публикацию
Adblock
detector