От автора: При увеличении количества устройств, применяемых для доступа в интернет (компьютеры, планшеты, смартфоны…), вам приходится гарантировать, что ваш веб-сайт будет смотреться хорошо в каждом из возможных устройств. В этой статье я собрал пять техник, суперполезных для отличного, более адаптивного сайта или веб-приложения.
Адаптивные изображения
Гибкие изображения – главный вопрос адаптивного дизайна. К счастью, довольно просто можно сделать свои изображения «гибими». Нижеприведенный код CSS гарантирует, что изображения будут максимально большими. Например, если изображение показывается внутри контейнера шириной в 600px, изображение будет 600px. Измените контейнер до 350px, и изображение автоматически уменьшится до максимально доступной ширины, в данном случае – 350 пикселей.
|
1 2 3 |
img { max-width: 100%; } |
Адаптивное видео HTML5
Раз спецификация HTML5 позволяет легко вставлять на свои страницы видеоролики, то почему бы этим не пользоваться? Сделать адаптивное видео HTML5 точно так же легко: просто добавьте в свой файл css следующий код и на этом все!
|
1 2 3 4 |
video { max-width: 100%; height: auto; } |
Адаптивное видео YouTube
Как я вам только что показал, нет ничего сложного в том, чтобы сделать изображения или видеоролики html5 адаптивными. А как насчет видео с популярных сайтов? В самом деле, YouTube – самый знаменитый видео-хостинг, так что велики шансы на то, что вам однажды придется работать в видеороликами YouTube. Сначала рассмотрим этот код HTML:
|
1 2 3 |
<div class="video-container"> <iframe src="//www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe> </div> |
Затем добавим в файл CSS следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Ну вот, теперь ваши видеоролики YouTube адаптивные! Этот код также отлично работает с видеороликами Vimeo, что видно из примера ниже:
|
1 2 3 |
<div class="video-container"> <iframe src="//player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe> </div> |
Адаптивное навигационное меню
Для посетителя навигационные меню – самый простой способ быстро отыскать то, что им требуется на вашем сайте. Но при просмотре веб-сайта на мобильном устройстве навигационные меню часто плохо читаются или ими слишком сложно пользоваться. По сути, для маленьких дисплеев гораздо удобнее применять выпадающие меню select вместо традиционных горизонтальных.
Вот простая методика, которую можно внедрить на любом сайте. Начнем с HTML – создадим два меню: стандартное ul для обычных дисплеев и выпадающее select для мобильных устройств:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href="/pages/about-us">About Us</a></li> <li><a href="/pages/support">Support</a></li> </ul> <select> <option value="" selected="selected">Select</option> <option value="/">Home</option> <option value="/collections/all">Books</option> <option value="/blogs/five-simple-steps-blog">Blog</option> <option value="/pages/about-us">About Us</option> <option value="/pages/support">Support</option> </select> </nav> |
А вот CSS. Здесь ничего сложного: мы по умолчанию скрываем select, а показываем его, только если ширина документа меньше 960px.
|
1 2 3 4 5 6 7 8 |
nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } } |
Адаптивные таблицы данных
Таблицы и адаптивный дизайн обычно не очень ладят между собой. Но вот действительно полезная техника, созданная вам в помощь разработчиком Крисом Койером (Chris Coyier) для адаптивных таблиц. Давайте начнем с создания обычной таблицы. Вот HTML…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Job Title</th> </tr> </thead> <tbody> <tr> <td>James</td> <td>Matman</td> <td>Chief Sandwich Eater</td> </tr> <tr> <td>The</td> <td>Tick</td> <td>Crimefighter Sorta</td> </tr> </tbody> </table> |
И CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* Обычные стили для десктопов/лэптопов */ table { width: 100%; border-collapse: collapse; } /* Черно-белые полоски */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } |
У нас получилась таблица с обычными стилями, теперь сделаем ее адаптивной. Мы собираемся сделать ничто иное, как заставить ее вести себя не как таблица, установив каждый связанный с таблицей элемент на block. Затем сохраним ее исходные черно-белые полосы, при этом каждая строка становится сама по себе таблицей, но шириной как экран. Не нужно горизонтальной прокрутки! Затем для каждой «ячейки» мы применим сгенерированный CSS контент (:before) для прикрепления метки, чтобы знать, что означает каждый фрагмент данных.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Заставьте таблицу больше не вести себя как таблица */ table, thead, tbody, th, td, tr { display: block; } /* Скройте заголовки таблицы (но в целях доступности не с display: none;) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Поведение как у «строки» */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Теперь как у заголовка таблицы */ position: absolute; /* Значения top/left имитируют отступ */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Пометьте данные */ td:nth-of-type(1):before { content: "First Name"; } td:nth-of-type(2):before { content: "Last Name"; } td:nth-of-type(3):before { content: "Job Title"; } td:nth-of-type(4):before { content: "Favorite Color"; } td:nth-of-type(5):before { content: "Wars of Trek?"; } td:nth-of-type(6):before { content: "Porn Name"; } td:nth-of-type(7):before { content: "Date of Birth"; } td:nth-of-type(8):before { content: "Dream Vacation City"; } td:nth-of-type(9):before { content: "GPA"; } td:nth-of-type(10):before { content: "Arbitrary Data"; } } |
Автор: Jean
Источник: «//www.catswhocode.com/
Редакция: Команда webformyself.
Комментарии (2)