Нажмите "Enter", чтобы перейти к контенту

Почему вам нужно быть отзывчивым дизайнером

Особенности отзывчивого дизайна

  • Это упрощает просмотр вашего веб-сайта на мобильном телефоне (или планшете) и устраняет неудобства масштабирования.
  • У адаптивного веб-сайта нет необходимости в отдельном «мобильном» веб-сайте. Один и тот же веб-сайт будет отвечать на разные размеры экрана.
  • Он использует HTML, CSS 3 и JavaScript (необязательно) для настройки веб-страницы для разных размеров экрана, включая экраны рабочего стола, планшета и смартфона и т. Д.)
  • CSS 3.0 делает работу с удобными веб-сайтами простой и опрятной.
  • Легко настраивается.

Что вам понадобится

  • Опыт работы с CSS и HTML
  • Дополнительно: понимание JavaScript

Как это работает

Отзывчивый дизайн использует мультимедийные запросы CSS, которые являются новой функцией CSS 3.0. CSS-запросы СМИ позволяют быстро реагировать, используя только CSS.

Запросы в СМИ используют правило @media (которое всегда начинается с @). Используя правило @media, определяются разные размеры экрана, а стили назначаются для каждого разного размера экрана. Например, если вы хотите, чтобы боковая панель шириной 200 пикселей, когда ширина экрана меньше 680px и 100px в ширину, когда ширина экрана меньше 460px, вы должны написать следующий код CSS:

@ (19659015)}

@media screen и (max-width: 680px) {

.

.

Первый медиа-запрос говорит: «Эти стили должны активироваться только на экране (не печатать) с максимальной шириной 680 пикселей». Второй медиа-запрос говорит: «Эти стили должны быть активированы только на экране с максимальной шириной 460 пикселей».

Просто для интереса, медиа-запросы могут также использоваться для определения стилей для печати. ​​

@media print {

.sidebar {width: 300px;}

.header {display: none;}

}

Эти стили будут активированы только после печати веб-страницы.

В разделе «Что вам понадобится» я упомянул JavaScript. JavaScript необязателен, но не нужен для гибкого дизайна. Это наиболее часто используется, чтобы скрыть навигационное меню на маленьких экранах и заменить его на одну кнопку, которая при щелчке отображает все меню навигации.

Заключение

Сегодня, когда так много людей используют маленькие экраны для просмотра веб-страниц, создание сайтов, которые не требуют масштабирования, является обязательным. Пользователи смартфонов вернутся на сайт, который выглядит привлекательно и легко ориентируется. Адаптивные веб-сайты устраняют необходимость в отдельном «мобильном» веб-сайте, что позволяет сэкономить много времени, денег и беспорядков.

Как веб-дизайнеры, принимая небольшое количество времени, чтобы изучить отзывчивый дизайн, важно — адаптивные веб-сайты — это будущее.

Будьте первым, кто оставит комментарий!

Добавить комментарий