Часть 2 Часть 3 Шестьдесят два процента данных изображения выдуманы в сети, и мы каждый день создавая все больше и больше байтов изображения.
Было бы здорово, если бы их все использовали по назначению.
Но на маленьких экранах или экранах с низким разрешением большая часть этих данных превращается в мусор .
Почему? Несмотря на то, что Интернет был спроектирован так, чтобы быть доступным для всех и через что угодно, лишь недавно разнообразие устройств достигло точки, которая вызвала серьезное движение в сторону адаптивного дизайна.
Когда мы создаем адаптивный дизайн, наш контент элегантно и эффективно передается на любое устройство.
Весь наш контент, кроме растровых изображений.
Растровые изображения имеют фиксированное разрешение.
Их сосуд – его почтение с его печально одиноким источником – не может адаптироваться.
Столкнувшись с выбором: сделать страницы размытыми для некоторых или медленными для всех, большинство дизайнеров выбирают последний вариант, отправляя всем изображения, предназначенные для заполнения огромных экранов с высоким разрешением.
То есть мусор.
Но! После трех лет споров появилось несколько элементов разметки, способных решить проблему с адаптивными изображениями: • исходный набор •размеры • картина • и источник нашего старого друга (взято из тегов audio и video) Эти новые элементы и атрибуты позволяют нам размечать, изменять и предоставлять каждому клиенту исходный код, который ему наиболее подходит. Они вошли в официальные спецификации и их первую полную реализацию в Chrome 38, выпущенную в сентябре.
С их элегантным снижением требований и полифилл Чтобы преодолеть этот разрыв, мы можем и должны начать использовать адаптивные изображения уже сейчас.
Поэтому начнем! Давайте возьмем существующую веб-страницу и сделаем изображения на ней адаптивными.
Это можно сделать в три этапа, применяя поочередно каждый новый элемент разметки: 1. Мы эффективно масштабируем наши изображения, используя srcset и размеры.
2. Мы создаем наши изображения, используя изображения и исходные материалы.
3. Предоставьте альтернативный формат изображения, используя изображение и тип источника.
Попутно мы сами увидим, как новые функции повышают производительность.
Статус-кво
Наверное, меня не столько волнует то, что я стар, сколько то, что я толстый и старый.В качестве нашего объекта возьмем небольшой страница о лоскутных одеялах.Бенджамин Франклин (или это был Питер Гэбриэл?)
Это простая адаптивная страница.
Контента здесь немного: просто огромные изображения (одеял!).
Мы хотим показать как общий дизайн каждого одеяла, так и как можно больше сложных деталей.
Поэтому для каждого одеяла мы представляем два изображения: 1. Общий вид одеяла, скорректированный по ширине пункта.
2. Детализированное изображение, занимающее 100 процентов ширины экрана.
Как бы мы определяли размер и расположение наших изображений без новых элементов макета? Сначала целые одеяла.
Чтобы они всегда выглядели четкими, нам нужно определить максимально допустимый размер их макета.
Вот пример CSS:
Теги: #CSS #адаптивный дизайн #CSS* {
-
Пик Вычислений Перед Пиком Нефти?
19 Oct, 24 -
Jstree — Деревья — Это Так Просто
19 Oct, 24 -
Смена Правительства Сша
19 Oct, 24 -
Умная Материя
19 Oct, 24 -
Вебинар «Партнерство С Microsoft»
19 Oct, 24
