Медіазапити

Історія адаптивних веб-сайтів

Гумові або центровані сайти.

Wap

Мобільна версія сайту

Єдиний сайт для всіх пристроїв

Концепція mobile-first

Перелік медіазапитів

Медіазапити в CSS дозволяють адаптувати верстку під різноманітні пристрої.

Приклади медіа-запитів:

@media print {
  * { background: none !important; }
}
@media screen and (max-widht: 980px) {
  .mobile { display: block; }
  .desktop { display: none; }
}

Отже, спочатку йде ключове слово @media, далі - фільтр пристрою і в фігурних лапках задаємо стилі, що мають працювати при даному фільтрі.

Зауважте, що сила цих стилів звичайна, тому медіа-запити зазвичай прописуються після основних стилів.

Іноді медіазапити виносять в окремий css-файл.

Якщо стилів не багато, то всі медіа-запити можна записати в кінці файлу.

Якщо css-файл великий, то медіа-запити краще прописувати в кінці кожної секції сайту, кожного логічного блока, віджета.

Фільтр пристроїв

@media screen { ... } - екран;
@media print { ... } - принтер;
@media tv { ... } - телевізор;
@media handheld { ... } - смартфон, планшет і т.п. (наразі не використовується);
@media all { ... } - всі пристрої;
@media { ... } - теж всі пристрої;
@media projection { ... } - проектор;
@media braille { ... } - пристрої виводу зі шрифтом Брайля;
@media embossed { ... } - принтери зі шрифтом Брайля;
@media speech { ... } - голосові синтезатори, голосові браузери;
@media tty { ... } - телетайпи, термінали (фіксовані символи)

Фільтр параметрів пристроїв (медіа-функції)

У більшості випадків використовуються min/max-width, решту - просто знайте, що такі є, в разі потреби їх можна нагуглити.

@media (max-width: 480px) { ... }
@media (min-width: 480px) and (max-width: 960px) { ... }
@media (orientation: portrait) { ... }
@media (orientation: landscape) { ... }
@media (device-pixel-ratio: 2) { ... }
@media (min-device-pixel-ratio: 2) { ... }
@media (max-device-pixel-ratio: 2) { ... }
@media (aspect-ratio: 16/9) { ... }
@media (min-aspect-ratio: 4/3) { ... }
@media (max-aspect-ratio: 16/9) { ... }
@media (device-aspect-ratio: 16/9) { ... }
@media (min-device-aspect-ratio: 16/9) { ... }
@media (max-device-aspect-ratio: 16/9) { ... }
@media (resolution: 300dpi) { ... }
@media (min-resolution: 300dpi) { ... }
@media (max-resolution: 300dpi) { ... }
@media (monochrome) { ... }
@media (color) { ... }
@media (color: 8) { ... }
@media (min-color: 2) { ... }
@media (max-color: 8) { ... }
@media (color-index: 256) { ... }
@media (min-color-index: 16) { ... }
@media (max-color-index: 65536) { ... }
@media (hover: hover) { ... }

Параметр color може приймати число - кількість біт на канал. Параметр color-index - кількість підтримуваних пристроєм кольорів.

Фільтри можна комбінувати логічними операторами and, or, not. При цьому в якості оператора or виступає кома:

@media tv, projection { ... }
@media printer and (min-resolution: 150dpi) and (color) { ... }
@media
  (orientation: portrait) and (min-width: 600px),
  (orientation: landscape) and (min-width: 800px) and (max-widht: 1200px)
  { ... }
@media screen and (not (monochrome)) { ... }

Завдання

Зробіть адаптивну версію меню:

<nav>
  <menu>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </menu>
</nav>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, laborum atque? Illo et veniam adipisci quia delectus molestias consequuntur aliquam sequi magnam, accusantium rerum quas, soluta esse aut sint eius.
</p>

nav {
  position: relative;
}
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  padding: 4px 12px;
  border-right: 1px solid silver;
  cursor: pointer;
}

Використайте <span> у якості кнопки розкриття меню для мобільної версії:

<span class="hamburger" title="menu">Show/hide menu</span>

.hamburger {
  position: relative;
  display: inline-block;
  margin: 12px 0;
  width: 24px;
  height: 2px;
  font-size: 0;
  line-height: 0;
  background: #999;
  cursor: pointer;
}
.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  padding-top: 6px;
}
.hamburger:before {
  bottom: 100%;
  border-top: 2px solid #999;
}
.hamburger:after {
  top: 100%;
  border-bottom: 2px solid #999;
}

Напишіть стилі для адаптації під ширину 480px і менше: меню повинно спозиціонуватися абсолютно, пункти меню повинні розташуватися в стовбчик.

@media (max-width: 480px) {
  ...
}

Сховайте меню, напишіть скрипт, що оброблює клік по гамбургеру та відображає чи ховає меню.

Спробуйте реалізувати дану затачу без скрипта, використовуючи input-checkbox в якості тріггера.

Версії сайту для друку та голосового браузера

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

Допишіть в кінець файлу стилів мдіазапит для принтера:

@media print {
  // стилі для друку
}

Приховайте ті блоки, які не повинні друкуватися.

Можливо, знадобляться додаткові блоки для друку: пунктинра лінія з ножицями чи щось подібне - їх необхідно відобразити.

Іноді доводиться переформатувати сторінку: якщо забрали бокову панельку (aside), то головний блок потрібно розмістити по всій ширині.

Центрування контенту тепер не потрібне:

@media print {
  .resize { margin: 0; width: auto;}
}

Можливо, потрібне буде пристосування до друку на папері певного формату, наприклад, A4:

@media print {
  .resize { margin: 0; width: 18cm;}
}

Є специфічні стилі для формування окремих сторінок.

Як правило, фонові зображення та кольори не друкуються, їх потрібно прибрати.

Також весь текст та границі бажано зробити чорним кольором, для кращої контрастності на папері (якщо не передбачається кольоровий друк).

Оцініть - які фотографії варто друкувати, а без яких можна і обійтися. Логотип зазвичай потрібно друкувати.

Види версток

Фіксована верстка (fixed layouts) - верстка, при якій чітко задана ширина сайта, на моніторах з невеликим розширенням екрана з'явиться горизонтальна полоса прокрутки.

Гумова верстка (rubber layouts) - верстка, при якій сайт займає всю ширину екрана і при зменшенні вінка браузера сайт звужується. Можуть застосовуватись стилі min-width та max-width.

Адаптивна верстка (adaptive layouts) - верстка, при якій відбувається адаптація сайту під певну ширину вікна браузера, на невеликих екранах деякі блоки можуть ховатися, відображатися по-іншому.

Чуйна верстка (отзывчивая, responsive layouts) - поєднання гумової та адаптивної верстки, часто із застосуванням скриптів.

Спочатку весь інтернет був гумовим, тому що не було стилів, не було можливості задати ширину блокам.

З появою табличної верстки з'явилась можливість робити фіксовану верстку. Та більшість сайтів все ж таки була гумовою, причина - невеликі розміри екранів, шириною 640, 1024 та 1280 пікселів.

Блочна верстка спрощувала створення фіксованої верстки, а поява широкоформатних екранів типу 16:9 та шириною 1600, 1920 гумову верстку потіснила: стало не зручно, коли інформація "розкидана" по великому широкому екрану, строки тексту занадто довгі.

Широке розповсюдження мобільних пристроїв з невеликими екранами призвело до появи адаптивної та чуйної верстки, для мобільних телефонів перестали робити окремі сайти.

Типові макети гумової верстки

Блок 1

clear: both;

Блок 1
float: left;
width: 200px;

Блок 2
margin-left: 220px;

clear: both;

Блок 1
float: right;
width: 200px;

Блок 2
margin-right: 220px;

clear: both;

Блок 1
float: left;
width: 200px;

Блок 2
float: right;
width: 250px;

Блок 3
margin-left: 220px;
margin-right: 270px;

display: table;

Блок 1
display: table-cell;
width: 200px;

Блок 3
display: table-cell;
width: 250px;

Блок 2
display: table-cell;

Домашнє завдання

  1. Зробіть версію для друку сайту Майнкрафт.
  2. Зверстайте технічний макет "Rubber" (jpg), зверніть увагу на аннотації.
  3. Дизайн сайту Супер-посилки (jpg) представлено у декількох макетах: для десктопів, планшетів, мобільних телефонів. Спробуйте зверстати його, використовуючи медіазапити.