Я новичок в этом мире, и я учусь самостоятельно с книгой "Learning Web Design" Дженнифер Роббинс.
Я попал в главу "Responsive images". После прочтения все стало ясно, но когда я попробовал упражнение, все стало сложнее.
В упражнении в книге было предложено заменить 3 тега с предыдущей страницы и заменить их тегом и набором из трех файлов для каждого. image (400, 800 и 1200px).
Код в книге такой:
<picture>
<source media="(min-width: 640px)"
srcset="images/bread-800.jpg 800w,
images/bread-1200.jpg 1200w"
sizes="80vw">
<img src="images/bread-400.jpg" alt="close-up of sliced rustic bread">
</picture>
Я попробовал его и проверил с помощью Chrome инструментов разработчика, но не вижу Файл изображения 800px. Для ширины <640px браузер получает файл 400px. И для ширины> = 640px он использует файлы 1200px.
Я также загрузил страницу на GitHub в david0495.github.io / gallery. html и попробовал XRespond. Вот скриншот с результатом: скриншот
Наконец-то я попытался открыть страницу на Chrome с измененным размером окна. Увеличив windows, я наконец вижу файл 800px. Но я не понимаю, в каком размере он активируется и почему я не вижу его в инструментах разработчика.
Я схожу с ума от этих вещей. Надеюсь, кто-то может помочь. Спасибо!