Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Тема 2. 6 введение в адаптивный дизайн
В настоящее время большое распространение находят различные гаджеты – смартфоны, планшеты, «умные часы» и другие устройства, которые тоже позволяют выход в Интернет. Стандартная веб – страница будет по-разному отображаться для различных устройств с различными разрешениями экрана. Первоначально данная проблема решалась созданием специальных версий для мобильных устройств. Но с появлением большого количества разнообразных устройств привело к тому, что веб – страницы необходимо подстраивать не только под экраны смартфонов, но и под большие экраны телевизоров. В связи с этим возникла концепция адаптивного дизайна. Ее суть заключается в том, чтобы должным образом масштабировать элементы веб – страницы в зависимости от ширины экрана. Тестирование адаптивного сайта При разработке адаптивных веб – страниц можно столкнуться с трудностями тестирования, т.к. разработка идет на обычном ПК. Но современные браузеры позволяют нам эмулировать запуск веб – страницы на том или ином устройстве с различной шириной экрана. Например, в Google Chrome надо перейти в меню Дополнительные инструменты – Инструменты разработчика. После открытия панели разработчика в начале меню самой панели нажать на иконку мобильного телефона, и после этого можно будет эмулировать отображение страницы на различных устройствах. Метатег Viewport Один из ключевых моментов адаптивного дизайна – метатег viewport, с этого тега начинается адаптивный дизайн. Вся видимая часть на экране браузера описывается понятием Viewport, по сути - это область в которую веб – браузер пытается «впихнуть» веб – страницу. По умолчанию браузер считает, что каждая веб – страница предназначена для стандартных экранов ПК (десктопов с шириной 980px.). При этом для каждого браузера устанавливается своя ширина области viewport. Если устройство имеет меньшую ширину экрана, то страница сжимается на коэффициент масштабирования. Чтобы избежать подобной картины следует использовать метатег viewport. Он имеет следующее определение: < meta name = " viewport " content = "параметры_метатега"> В атрибуте content можно определить следующие параметры:
Пример применения: <meta name="viewport" content="width=device-width"> В данном случае веб – браузеру говориться, что в качестве начальной ширины области viewport надо брать непосредственно ширину экрана устройства. Можно применять другие параметры: <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0"> Правила Media Query Важным элементом в построении адаптивного дизайна являются правила Media Query, которые позволяют определить стиль в зависимости от размера браузера пользователя. <html> <head> <title>Адаптивная веб-страница</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="desctop.css" /> <link rel="stylesheet" type="text/css" media="(max-device-width:480px)" href="mobile.css" /> </head> <body>
Значение атрибута media="(max-device-width:480px)" говорит о том, что стили из файла mobile. css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480px, т.е. для мобильных устройств. С помощью ключевого слова and можно комбинировать условия: <link rel="stylesheet" type="text/css" media="(min-width:481px) and (max-width:768px)" href="mobile.css" /> С помощью директивы @ import можно определить один css-файл и импортировать в нем стили для определенных устройств: @import url(desctop.css); @import url(tablet.css) (min-device-width:481px) and (max-device-width:768); @import url(mobile.css) (max-device-width:480px); Также можно не разделят стили по файлам, а использовать правила CSS3 Media Query в одном файле css: body { background-color: red; } /*Далее остальные стили*/
@media (max-device-width:480px){ body { background-color: blue; } /*Далее остальные стили*/ } Применяемые функции в CSS3 Media Query: aspect - ratio – отношение ширины к высоте области отображения (браузера); device - aspect - ratio – отношение ширины к высоте экрана устройства; max - width / min - width, max - height / min - height – максимальная и минимальная ширина и высота области отображения (браузера); max - device - width / min - device - width, max - device - height / min - device - height - максимальная и минимальная ширина и высота мобильного устройства orientation – ориентация портретная (portrait) или альбомная (landscape)
|
|||||||||||||||||||||||||||
|
|
Последнее изменение этой страницы: 2021-04-05; просмотров: 75; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 52.14.240.178 (0.006 с.) |
