Объедините медиа и введите запросы в теге источника 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>