Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Адаптивний дизайн: верстка під будь-який екран - підручник CSS

  1. CSS-інструменти для адаптивного дизайну
  2. Налаштування для адаптивного дизайну

Сьогодні все рідше і рідше можна зустріти новий веб-сайт, який би не мав адаптивного дизайну або мобільної версії, призначеної спеціально для мобільних девайсів. За допомогою CSS можна легко створити дизайн, який буде підлаштовуватися під пристрої з будь-якою шириною екрану. Використовуючи спеціальні правила, ви можете визначити зовнішній вигляд веб-сторінки в залежності від ширини вікна браузера.

Як правило, повноцінна версія сайту виглядає дивно на звичайному смартфоні. Щоб розглянути текст, користувачеві доводиться користуватися збільшенням і горизонтальною прокруткою. З іншого боку, сайт у вигляді однієї вузької колонки буде виглядати ще більш дивно на широкому комп'ютерному моніторі.

Адаптивний веб-дизайн (англ. Responsive web design, RWD) - це підхід до створення веб-сторінок, при якому їх зовнішній вигляд визначається через CSS, грунтуючись на ширині вікна браузера. Це дозволяє забезпечити зручний дизайн для будь-якого пристрою, без необхідності створення декількох різних сайтів.

CSS-інструменти для адаптивного дизайну

В адаптивному веб-дизайні використовуються гнучкі grid-системи, масштабовані зображення і спеціальні медіа-запити CSS (деякі з них ми вже використовували в практичних уроках підручника).

Гнучка сітка життєво необхідна, оскільки в нашому світі існує величезна кількість пристроїв, і кожне зі своїм розміром дисплея. Тому просто неможливо створити фіксований розмір макета, який би красиво вписався в екран будь-якої ширини. Потрібна розмітка, яка може розширюватися і звужуватися (разом з контентом), підлаштовуючись під екран конкретного пристрою.

Медіа-запити - це CSS-технологія, яка дозволяє визначати умови для відображення тих чи інших стилів. Наприклад, ви можете задати один набір CSS-правил для екранів шириною менше 768 пікселів, другий - для ширини понад 991 пікселів і т. Д.

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

Налаштування для адаптивного дизайну

Коли на мобільному пристрої проглядається сайт без адаптивного дизайну, браузер повністю поміщає його в ширину екрану. При цьому він виглядає, як на ілюстрації зліва:

При цьому він виглядає, як на ілюстрації зліва:

Джерело: developers.google.com

Це називається зменшенням масштабу сторінки, і саме таким чином браузер відображає неадаптівние сайти. Щоб скористатися таким сайтом, користувачеві доведеться збільшувати масштаб вручну, а також прокручувати сторінку по горизонталі.

Якщо ж дизайн вашого сайту адаптивен, вам необхідно додатково повідомити про це браузеру. Робиться це легко - просто додайте всередину тегаследующую рядок:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

Даний мета-тег говорить браузеру, що ширина контенту повинна бути рівна ширині екрана браузера, яка в свою чергу дорівнює ширині екрану пристрою, з якого проглядається веб-сторінка. Initial-scale контролює рівень масштабування при завантаженні сторінки.

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

Далі в підручнику: медіа-запити CSS .

Новости

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

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

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

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

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

Надувные шарики с гелием с доставкой
На праздники часто бывают востребованы воздушные шарики, надутые гелием. Обычно, их покупают уже готовыми (надутыми) и привозят на праздник. Или, приглашают специалистов, которые приезжают и надувают

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно