Слайд 13Media queries - Нужны для отображения макета, оптимизированного под разрешение, с
которого в данный момент этот сайт смотрится
@media only screen and (min-width: 480px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
Запрос содержит 2 компонента: 1. тип медиа (screen) 2. соответствующий запрос заключённый в скобки, содержащий определённую медиа-особенность (max-device-width), которую хотим проверить, с указанием конечного значения (480px).
Слайд 14Типы запросов All Подходит для всех устройств. Braille Предназначен для Брайля тактильных устройств обратной связи. Embossed Предназначен
для страничных Брайля принтеров. Handheld Предназначен для портативных устройств (обычно небольшой экран, ограниченная пропускная способность). Print Предназначен для страничных материала и для документов, просматриваемых на экране в режиме предварительного просмотра. Projection Предназначен для прогнозируемых презентации, например проекторов. Screen Предназначен в первую очередь для цветной компьютерных экранов. ttyПредназначен для сред с использованием символа сетку фиксированного шага (например, телетайп, терминалы или портативные устройства с ограниченными возможностями дисплея). Авторы не должны использовать пиксельных блоков с типом "TTY" средств массовой информации. tvПредназначен для устройств типа телевизора (низкое разрешение, цвет, ограниченная-scrollability экраны, звук имеется).
Слайд 19Шрифты REM. Наконец-то относительный размер шрифта рассчитывается от корня страницы (Root EM),
а именно — от тега HTML, а не от родителя. Все бы ничего, но если мы меняем размер шрифта у HTML — все дочерние блоки так же меняют свой размер шрифта; media. Тут тоже все красиво и просто. До этого размера у нас такой шрифт, а до этого — такой. Будь добр именно так и отображать; Специальные JS скрипты, такие как fillText и bigText, автоматически изменяющие размер шрифта для того, чтобы растянуть строку на всю ширину. Слоганы, девизы, названия разделов выглядят круто в большинстве своем благодаря именно вам; VW. Довольно таки свежий формат шрифтов, который пропорционально изменяется при изменении размера браузера;
Слайд 26
Адаптивная картинка
img { max-width: 100%; height: auto;}
Определяет размер окна браузера и выбирает для отображения оптимальное
изображение относительно окна просмотра. Элемент идеально подходит для мобильных устройств в которых медленно работает интернет. Для валидности элемент должен находится внутри тега Ретина, т.е. экраны с плотностью точек на дюйм 150 и выше, на которых обычное изображение выглядит размыто Адаптивность, задача изменения размеров изображения согласно вашим правилам, прописанным в дизайне в зависимости от размера вьюпорта. Формат, возможность использовать современные форматы, такие как WebP, если они поддерживаются браузером Кадрирование или Художественные цели. Обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном.
Слайд 27Загружать изображения соответствующих размеров, с максимальной отдачей используя имеющуюся ширину канала. Загружать
изображения с различной обрезкой и пропорциями в соответствии с изменением разметки для экранов разной ширины. Загружать изображения с высоким разрешением для экранов с высокой плотностью пикселей.
Слайд 29Сокращенная совсем без использования picture
Слайд 30Ретина
У нас есть изображение 400х300 пкс, которое мы хотим также красиво
показывать при двукратной и трехкратной плотности пикселей. Для этого готовим еще 2 картинки, размерами 800x600 и 1200х900 и пишем следующий код
2x и 3x это дескрипторы плотностей пикселей, они говорят браузеру, что вот эти картинки были подготовлены для вот этой плотности, если хочешь, можешь использовать
Слайд 31Адаптивность
Когда мы показываем фото на меньшем экране иногда имеет смысл обрезать
лишние детали, оставив только основную часть.
Для значения ширины используется новая единица длины vw, которая возвращает значение в процентах от ширины вьюпорта.
Одновременное использование дескрипторов плотности и ширины недопустимо.
400w, 800w, 1200w — это дескрипторы ширины, они подсказывают браузеру картинка какой ширины находится по данному URL и на основе этой информации браузер принимает решение какое изображение лучше всего подойдет в текущей ситуации.
Слайд 34Viewport
При сравнении мобильных и десктопных браузеров наиболее очевидное различие — размер экрана Нужно
каким-нибудь образом сообщить браузеру, что наша страница предназначена для отображения на мобильных устройствах
Слайд 35 Задав мета-тегу viewport значение “device-width”, мы говорим браузеру, что ширина области просмотра
равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию.
Слайд 36Мета-тег viewport — относительно новый, поэтому на данный момент поддерживается не
всеми браузерами, особенно это касается старых моделей смартфонов. В таких случаях есть смысл использовать некоторые старые методы, которые позволяют браузеру идентифицировать страничку, как оптимизированную под мобильный веб. Это можно сделать, с помощью следующий мета-тегов:
Слайд 37Возможные параметры для мета-тега viewport
Слайд 40Несколько технических замечаний. Однако, если вы заинтересованы, чтобы устаревшие версии поддерживали запросы
media, есть решения на основе JavaScript: jQuery плагин 2007-го года, предлагает ограниченные возможности media запросов, только медиа свойства min-width и max-width, которые устанавливаются для отдельных link элементов. Недавно выпущен css3-mediaqueries.js, библиотека, которая обещает "научить IE 5+, Firefox 1+ и Safari 2 работать с CSS3 media запросами", будучи подключёнными посредством @media блоков. С самой первой версии мне эта библиотека показалась удачной, и планирую следить за её развитием.
Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.
