Сайт своими руками


Пособие для начинающих
Редактируем готовые шаблоны


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


» » Основы адаптивного веб-дизайна.

Основы адаптивного веб-дизайна.

  • Автор: Saah
  • |
  • Комментариев: 0
  • |
  • Просмотров: 108
Основы адаптивного веб-дизайна.

Адаптивный веб-дизайн — это метод, в котором CSS используется для изменения макета страницы в зависимости от размера экрана. Это только одна из стратегий, применяемых, чтобы справиться с разнообразием размеров экранов устройств.

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

Настройка области просмотра страниц сайта.

Чтобы уместить стандартные веб-сайты на небольших экранах, мобильные браузеры визуализируют страницу на холсте, называемом областью просмотра, а затем сжимают эту область до размеров ширины экрана устройства. Например на смартфоне iPhone браузер Safari задает ширину области просмотра 980 пикселов так, что веб-страница отображается, словно в окне браузера шириной 980 пикселов, открытом на настольном компьютере. Но отображение сжимается до 640 пикселов в ширину, запихивая большой объем информации в крошечное пространство, когда iPhone находится в книжной ориентации.

В браузере Safari на устройствах под управлением операционной системы iOS был введен тег meta для исходной области просмотра, который позволяет разработчикам управлять ее размером. Вскоре другие мобильные браузеры последовали этому примеру, что стало важным первым шагом на пути к адаптивному дизайну. Добавьте следующий элемент meta в раздел заголовка HTML-документа:

<meta name="viewportn content="width=device-width, initial- scale=l">

Эта строка указывает браузеру задать ширину области просмотра равную ширине экрана устройства (width=device-width), какой бы она ни была. Атрибут initial-scale задает уровень масштабирования - 1 ( 100%).

Адаптивный макет.

В качестве альтернативного подхода, особенно когда нет времени или средств для по- настоящему адаптивной переработки сайта, некоторые дизайнеры решают вместо этого создать адаптивный макет. Такие макеты состоят из двух или трех различных фиксированных макетов, ориентированных на наиболее распространенные устройства. Возможно, их создание проходит быстрее и не столь трудоемко, но преимущества жидких макетов (см. ниже) будут потеряны. Некоторые считают, что адаптивные макеты — это, скорее, временное решение, чем долгосрочная стратегия мобильного дизайна.

Жидкий макет.

Поскольку жидкие макеты являются основополагающими для адаптивного дизайна, я думаю, не помешает их краткое описание. Жидкие макеты создаются с помощью процентных значений ширины так, что размер элементов изменяется пропорционально, чтобы заполнить доступную ширину экрана или окна. Невозможно создать дизайны для всех возможных вариантов ширины устройства, на котором будет просмотрена ваша страница. Веб-дизайнеры обычно готовят два или три проекта (иногда несколько), ориентированных на основные классы устройств, таких как смартфоны, планшеты и настольные браузеры, полагая, что жидкий макет справится со всеми промежуточными размерами. Жидкие макеты стараются не оставлять неудобно большое ненужное пространство и не позволяют обрезать правую часть страницы.

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


Людям интересно:


Статья опубликована: 24-05-2017, 03:19

Сохраните для себя


Оставьте комментарий.
Ваше мнение будет полезно посетителям сайта:




Имя:* E-Mail:*
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите код: *
Использование материалов сайта приветствуется. При копировании и размещении данной информации на сторонних ресурсах, ссылка на сайт SiteY.ru желаема.