Как учитывать плотность пикселей при разработке адаптивного сайта?

При разработке адаптивного сайта важно учитывать плотность пикселей, чтобы страницы корректно отображались на разных устройствах. pr-cy.ru habr.com

Некоторые способы учёта плотности пикселей:

• Использование метатега viewport. pr-cy.ru habr.com Он позволяет задать начальное масштабирование контента и ширину. habr.com Размеры элементов: шрифтов, блоков, картинок могут задаваться в пикселях, но физический размер пикселей на устройствах отличается в зависимости от плотности. habr.com
• Применение медиазапросов CSS. pr-cy.ru Это фильтры, которые позволяют изменять стили CSS на основании характеристик устройства: ориентации, параметров экрана, ориентации и типа устройства. pr-cy.ru
• Использование атрибута srcset. htmlacademy.ru Он позволяет указать несколько вариантов изображений с разными разрешениями или плотностями пикселей. htmlacademy.ru Браузер выбирает наиболее подходящее изображение на основе плотности пикселей экрана устройства, чтобы загрузить его. htmlacademy.ru
• Использование относительных размеров в процентах. pr-cy.ru Многие разработчики не указывают конкретные значения пикселей в коде, а используют относительные размеры в процентах. pr-cy.ru Это позволяет браузерам подбирать масштаб, исходя из пользовательского экрана. pr-cy.ru
• Применение дескриптора плотности пикселей. htmlacademy.ru Он задаёт плотность пикселей изображения или экрана, для которого предназначена конкретная картинка. htmlacademy.ru Дескриптор измеряется в пикселях на дюйм (ppi). htmlacademy.ru