Объедините медиа и введите запросы в теге источника html5

Это мой первый вопрос о переполнении стека, хотя я давно использовал переполнение стека для помощи.

Чтобы все было коротко. Я хочу знать, возможно ли написать разметку, где я комбинирую медиа и набираю вопросы в теге источника html5. Разметка, которую я сейчас использую, кажется неправильной. Но моя конечная цель - переключаться между размерами в зависимости от размера экрана и ppi, в то же время переключаясь между webp и jpeg в зависимости от браузера.

Может кто-нибудь, пожалуйста, укажите мне в правильном направлении? Я был бы действительно великолепен.

Вот пример моей текущей разметки: (пожалуйста, обратите внимание, что это только вырез разметки, и выбранные размеры не должны комментироваться)

<picture>
<source 
    media="(max-width: 320px)"
    srcset="images/filename_320x240.webp,
    images/filename_384x288.webp 1.2x,
    images/filename_512x384.webp 1.6x,
    images/filename_768x576.webp 2.4x,
    images/filename_896x672.webp 2.5x"
    type="image/webp">
<source 
    media="(max-width: 320px)"
    srcset="images/filename_320x240.jpg,
    images/filename_384x288.jpg 1.2x,
    images/filename_512x384.jpg 1.6x,
    images/filename_768x576.jpg 2.4x,
    images/filename_896x672.jpg 2.5x"
    type="image/jpg">
<source 
    media="(max-width: 680px)"
    srcset="images/filename_768x576.webp,
    images/filename_896x672.webp 1.2x,
    images/filename_1024x768.webp 1.5x,
    images/filename_1296x864.webp 1.7x,
    images/filename_1440x960.webp 1.8x,
    images/filename_1536x1024.webp 2x,
    images/filename_1728x1152.webp 2.2x,
    images/filename_1920x1280.webp 2.5x"
    type="image/webp">
<source 
    media="(max-width: 680px)"
    srcset="images/filename_768x576.jpg,
    images/filename_896x672.jpg 1.2x,
    images/filename_1024x768.jpg 1.5x,
    images/filename_1296x864.jpg 1.7x,
    images/filename_1440x960.jpg 1.8x,
    images/filename_1536x1024.jpg 2x,
    images/filename_1728x1152.jpg 2.2x,
    images/filename_1920x1280.jpg 2.5x"
    type="image/jpg">
<img 
    src="images/filename_1296x864.jpg"
    alt="An image of a red fish">
</picture>

0 ответов

Другие вопросы по тегам