@ Media. Зробити ширину сайту в залежності від роздільної здатності монітора

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

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

Дуже часто коли заходиш на сайт зі свого мобільного пристрою, доводиться збільшувати веб-сторінку, щоб можна було прочитати цей дрібний текст, який ще й на додачу повністю не міститься на екрані мобільного пристрою. Таким чином доводиться прокручувати праворуч і ліворуч веб сторінку, що в свою чергу завдає деякої незручності. А ось якщо Ви зайшли на сайт з адаптивним веб-дизайном, то картина зовсім змінюється. Вам взагалі не потрібно робити жодних «тіло рухів» все дуже зручно та зрозуміло читається.
Тобто адаптивний дизайн відповідає за правильне відображення сайту на будь-яких мобільних пристроях . Він так би мовити, підлаштовує сайт під дозвіл мобільного девайсу.

У цій невеликій статті ми почнемо серію статей про адаптивність.
Все більшої популярності стали набувати «гумові» сайти, які створюються шляхом використання:
1. Спосіб: @ Media
2. Спосіб: Відносних величин.
Завдяки їм тепер не потрібно шукати оптимальної ширини сайту.

@Media CSS

Для того, щоб адаптувати дизайн Вашого web-проекту під різні пристрої (планшети, мобільні телефони, принтери тощо), застосовується @Media. З усього різноманіття types і Queries, як правило, впроваджують print та width. У цій статті розглянемо width. Він впливає на відображення веб-сайту у вікні браузера різної ширини. Тому для того, щоб побачити його в дії, достатньо зменшити розмір вікна браузера. Наш шаблон – адаптивний.
Небагато коду:

@media (max-width: 930px) { /* це буде показано при дозволі монітора до 930 пікселів */
.content-wrapper {padding: 0;} /* основний вміст займає весь простір вікна, стиль ви використовуєте свій */
}

@media (max-width: 930px) and (min-width: 470px) { /* для роздільної здатності екрана від 470 до 930 пікселів */
left {position: static; width: 100%; background: #ccc;} /* бічна колонка зміщується відповідно до розташування в HTML і змінює фон */
}

@media (max-width: 469px) { /* якщо максимальна роздільна здатність екрана складе 469 пікселів */
body {font: .9em/1em "Arial, Helvetica, sans-serif;} /* змінюється шрифт */
left {display: none;} /* бічна колонка зникає */
}

Замість px краще використовувати em. Для чого значення px потрібно розділити на значення font-size px. Наприклад, 1600/16=100, саме media='(min-width: 100em)'.
CSS стилі можна безпосередньо додати в код сторінки, так і скористатися зовнішнім файлом, наприклад:

<link rel='stylesheet' href='URL_за промовчанням.css' />
<link rel='stylesheet' media='(min-width: 1600px)' href='URL_великий.css' />
<link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_середній.css' />
<link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_екран.css' />

Розміщення екрану як «пейзаж» (ширина більше висоти) та «портрет» (ширина менше висоти)

@media all and (orientation:landscape) {
/* стилі для пейзажу */
}
@media all and (orientation:portrait) {
/* стилі для портрета */
}

або

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Наша студія дизайну «Рух» займається створенням адаптивних сайтів, так що звертайтеся.
Статей щодо адаптивності буде багато – підписуйтесь.