От автора: это руководство по синтаксису HTML для адаптивных изображений (и немного CSS). Синтаксис адаптивных изображений — это обслуживание одного изображения из нескольких вариантов в зависимости от правил и обстоятельств.

Продолжить чтение →

От автора: эта статья посвящена наиболее распространенному варианту использования адаптивного изображения: переключению разрешения.

Продолжить чтение →

От автора: единицы измерения CSS, связанные с областью просмотра, появились несколько лет назад, и со временем я вижу, что они все больше используются разработчиками. Их преимущество заключается в том, что мы можем гибко и динамично оценивать размер вещей без необходимости использования JavaScript. Кроме того, для них легко предоставить запасной вариант.

Продолжить чтение →

От автора: недавно я работал над современной версией блогролла. Идея заключалась в том, чтобы предложить читателям подборку последних постов из этих блогов в макете в стиле журнала, а не просто выложить список любимых постов в боковой панели.

Продолжить чтение →

От автора: слово «адаптивный» — это то, что мы часто даже не упоминаем, потому что в наши дни это уже стандарт в веб-разработке. Существует огромное количество различных экранов, и их число постоянно растет. Мы хотим иметь возможность поддерживать все возможные размеры и при этом сохранять хороший пользовательский опыт. И медиа-запросы CSS — отличное решение данной проблемы. Но как насчет адаптивных компонентов?

Продолжить чтение →

От автора: во время работы я видел, как многие веб-разработчики изо всех сил пытались понять, как в веб-браузерах обрабатывать пиксельные единицы в мире экранов высокой плотности. В наши дни экраны высокой плотности и retina экраны есть на всех мобильных устройствах. Это в дополнение ко многим размерам экрана, с которыми мы имеем дело: мобильные телефоны, планшеты, настольные компьютеры и многое другое.

Продолжить чтение →

От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, до старого iPhone 4 с его 3,5-дюймовым экраном.

Продолжить чтение →

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

Продолжить чтение →

От автора: галереи изображений на таких сайтах, как Unsplash , Pinterest и т.д., созданы с помощью методов позиционирования или перевода элемента изображения, которые являются очень сложными. Вы можете достичь того же очень быстро, зная, как делается в CSS Grid галерея.

Продолжить чтение →

От автора: на днях я прочитал статью Дарио Гизелара по оптимизации кода путем удаления неиспользуемых медиа-запросов CSS. Одна из основных мыслей заключается в том, что вы можете использовать атрибут media при включении таблиц стилей.

Продолжить чтение →