С увеличением количества устройств, используемых для выхода в интернет, владельцам веб сайтов всё чаще нужно задумываться об адаптивной верстке. Благодаря ней можно быть уверенным, что сайт будет хорошо отображаться на любом устройстве.
Адаптивные изображения
Выравнивание изображений по центру является главным аспектом адаптивного дизайна. Код ниже позволяет показывать изображение на странице с учётом ширины колонки. Например, ширина колонки 600, изображения 1000 пикселей. На странице ширина изображения будет равна 600 пикселям. При изменении размеров окна браузера и соответственно ширины колонки, размер изображения будет меняться в меньшую или большую сторону.
img {
max-width: 100%;
}
Адаптивное видео
В новой спецификации HTML5 у нас появилась возможность более простой вставки видео на страницы. А чтобы видео тоже подстраивалось под размер колонки достаточно добавить следующий код:
video {
max-width: 100%;
height: auto;
}
Адаптивное видео с Youtube
Как было показано выше нет ничего сложного в отображении адаптивных изображений и видео. Поскольку Youtube является крупнейшим видео сервисом в мире, чаще всего видео будет храниться именно там.
Вот правильная разметка для плеера:
<div class="video-container"> <iframe src="http://www.youtube.com/embed/jy3weRw5UJY" width="560" height="315" frameborder="0"></iframe> </div>
Теперь осталось добавить css свойства:
.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%;
}
Адаптивное меню навигации
Меню навигации является основой любого сайта. Но, при просмотре сайта на мобильном устройстве оно, чаще всего, становится нечитабельным. На самом деле, в таких случаях гораздо проще использовать тег select для оформления меню.
Вот простой способ его создания. Для начала нам понадобится меню для основных дисплеев, его оформим в тег ul и select для мобильных устройств.
<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 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 по умолчанию и показываем только тогда, когда разрешение экрана меньше 960 пикселей.
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
Адаптивные таблицы
Таблицы и адаптивный дизайн — не самое лучшее сочетание. Ниже представлен действительно полезный метод, чтобы помочь сделать таблицы более отзывчивыми.
<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>
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
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;
}
Теперь у нас есть html разметка и базовые css стили. Давайте сделаем таблицы адаптивными. Для этого мы зададим отображение элементов таблицы как блоков.
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
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"; }
}