Знаете, что круче, чем использование изображения при создании веб-сайта? Как насчет создания чего-то с помощью HTML и CSS, которое выглядело бы и действовало бы как изображение? И знаете что, теперь с контейнерными запросами это очень просто. В этом посте мы собираемся создать рекламу, похожую на изображение, с использованием HTML и CSS.  Затем мы собираемся заставить его действовать как изображение, поскольку оно будет сжиматься, расширяться и перемещаться в другие места документа. Хорошо, давайте проверим это!   https://youtu.be/5ugwp7HlpGs?embedable=true  Итак, у нас есть реклама Vans на боковой панели сайта, который мы создаем, и в настоящее время это изображение.   Это затрудняет редактирование; дизайнеру придется обновить его и предоставить нам новое изображение, если что-то нужно будет изменить.  Кроме того, нам, вероятно, понадобится несколько версий для использования с исходным набором, чтобы он выглядел четко на дисплеях как с высокой плотностью, так и с низким разрешением.  Итак, перед нами стоит задача преобразовать его в HTML; Как мы можем это сделать?  Некоторые недостатки использования изображений и единиц видового экрана  Что ж, мы, вероятно, могли бы использовать единицы области просмотра, но нам нужно было бы добавить дополнительный код, если бы мы хотели разместить рекламу в разных местах, где ее размеры были бы разными, поскольку все было бы основано на области просмотра, а не на размерах контейнера.  Итак, мы могли бы справиться с этим, но это может стать немного запутанным. Вместо этого мы могли бы использовать контейнерные запросы и блоки контейнерных запросов. Контейнерные запросы немного похожи на медиа-запросы, но основаны на размерах любого конкретного контейнера на странице, а не на общей области просмотра.  Настройка контейнера с помощью свойства CSS  container-type  Хорошо, давайте проверим, с чего мы начнем.   Итак, здесь он выглядит довольно хорошо, но как он реагирует?   Э-э, текст и границы не меняют размер, поэтому нужно немного поработать, потому что в нынешнем виде он довольно сломан. Итак, одна вещь, которую мы здесь уже делаем, это то, что мы используем   , которое позволяет контейнеру реагировать так же, как изображение, и это все хорошо. aspect-ratio   figure { aspect-ratio: 1 / 1.5; }  Нам просто нужно изменить все размеры контента, чтобы он тоже реагировал правильно. Первым шагом здесь является предоставление контейнера для мониторинга наших измерений. Это будет наш элемент фигуры.  Чтобы использовать здесь контейнерные запросы, нам нужно определить так называемый контекст включения. Мы можем сделать это с помощью свойства   . В этом примере мы можем использовать значение встроенного размера. container-type   figure { ... container-type: inline-size; }  Это позволит настроить контейнер, который будет определять размеры объектов в зависимости от их встроенного размера, который в данном случае будет шириной фигуры. Хорошо, теперь у нас есть контейнер для мониторинга, и теперь мы можем свободно использовать блоки запросов контейнера. И есть из чего выбрать. Мы можем использовать любое из этих значений единицы измерения:   cqw   cqh   cqi   cqb   cqmin   cqmax  Здесь мы собираемся использовать   , который, как мне кажется, означает встроенный запрос контейнера. Одна единица   равна одному проценту ширины контейнера. Хорошо, это все, что нам нужно; отсюда мы просто устанавливаем единицы измерения по мере необходимости. cqi cqi  Здесь у нас есть пара пользовательских свойств, которые используются в нескольких элементах этого объявления.   figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }  Начнем с того, насколько этот кадр вставлен от внешнего края контейнера. Давайте сделаем это тремя   . cqi   figure { ... --frameInset: 3cqi; }  Далее, давайте установим здесь толщину границ. В этом случае я собираюсь использовать функцию   , чтобы границы никогда не сжимались ниже одного пикселя, но я хочу, чтобы они были динамическими, пока они больше этого значения в один пиксель. max  Итак, первое значение — это один пиксель, второе — динамическое значение. Давайте сделаем это одним   . cqi   figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }  Теперь для   элемента, которым является главный заголовок, текст «Ванс», давайте сделаем двадцать пять   . А для пространства под заголовком давайте сделаем три   . strong cqi cqi   strong { font-size: 25cqi; padding-bottom: 3cqi; }  Теперь давайте перейдем к подзаголовку «Off the Wall». Он должен быть примерно вдвое меньше основного заголовка, поэтому давайте попробуем двенадцать   . А для пространства над текстом снова возьмем три   . cqi cqi   em { font-size: 12cqi; padding-top: 3cqi; }  Хорошо, для последней части, надписи «С 1966 года», давайте выберем размер шрифта шесть   . А для пространства сверху и снизу мы используем логическое свойство для   , которое принимает до двух значений. Первое значение — это значение над текстом, а второе значение — это пространство ниже. cqi padding-block  Итак, давайте рассмотрим два   описанные выше. И в наших расчетах мы оставим   как есть, но добавим пять   дополнительного пространства. cqi --frameInset cqi   time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }  Хорошо, круто, это выглядит хорошо.   Давайте посмотрим, как он отреагирует. Когда мы его сжимаем, все реагирует правильно и равномерно, как мы и хотели. Это очень похоже на картинку.   Он выглядит довольно хорошо, даже когда он маленький, и вы можете видеть, что границы никогда не уменьшаются ниже одного пикселя. Затем, когда мы добираемся до действительно узкой ширины, она становится шире, и все по-прежнему выглядит великолепно.   Насколько это круто? Один набор стилей, и он работает полностью. Когда мы масштабируем его вперед и назад, он выглядит великолепно.  Что еще более круто, так это то, что мы можем взять нашу рекламную разметку, переместить ее в область основного столбца или сюда, и все продолжит работать так же, как если бы это было изображение.     <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div>  Это просто так приятно и так круто. Помните, что есть только один набор стилей, позволяющий реализовать все это. И никаких медиа-запросов не было. В целом контейнерные запросы — это нечто большее, так что следите за будущими статьями, в которых я освещаю различные аспекты.  Хотите увидеть это в действии?  Ознакомьтесь с демонстрационным кодом и примерами этих методов в примере Codepen ниже. Если у вас есть какие-либо вопросы или мысли, не стесняйтесь оставлять комментарии.   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

Этот звук создан на языке оригинала истории!

Слишком долго; Читать

Make resilience your competitive advantage

HTML: как изменить размер изображения с помощью запросов к контейнеру CSS!

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Утечка информации о системе Claude Sonnet 3.5: судебно-медицинский анализ

Повысьте свою производительность с помощью этих 18 инструментов разработчика 🚀🔥

От форумов до лент новостей: как алгоритмы социальных сетей формируют цифровое взаимодействие

Полное руководство по успешной миграции в облако: стратегии и лучшие практики

Утечка информации о системе Claude Sonnet 3.5: судебно-медицинский анализ

Повысьте свою производительность с помощью этих 18 инструментов разработчика 🚀🔥

От форумов до лент новостей: как алгоритмы социальных сетей формируют цифровое взаимодействие

Полное руководство по успешной миграции в облако: стратегии и лучшие практики

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps