Блог

Я пытаюсь создать веб-страницу с изображениями, которые меняют свой размер в зависимости от размера окна. И я нашел следующий веб-сайт: https://www.responsivebreakpoints.com

Этот веб-сайт генерирует веб-адаптивный HTML-код, когда вы загружаете изображение, которое хотите адаптировать (а также обрезаете его и даете вам все разные размеры).

Я смотрел на код, и я изо всех сил пытаюсь его понять:

 <picture>
      <source
      media="(max-width: 767px)"
      sizes="(max-width: 1534px) 100vw, 1534px"
      srcset="
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_50.jpg 50w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_656.jpg 656w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_893.jpg 893w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1121.jpg 1121w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1291.jpg 1291w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1452.jpg 1452w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1529.jpg 1529w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
      <source
      media="(min-width: 768px) and (max-width: 991px)"
      sizes="(max-width: 1983px) 70vw, 1388px"
      srcset="
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_945.jpg 945w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1222.jpg 1222w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1349.jpg 1349w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
      <source
      media="(min-width: 992px) and (max-width: 1199px)"
      sizes="(max-width: 2400px) 60vw, 1440px"
      srcset="
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1068.jpg 1068w,
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1398.jpg 1398w,
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
      <img
      sizes="(max-width: 13688px) 40vw, 5475px"
      srcset="
            milkyway_a0ye1g_c_scale,w_480.jpg 480w,
            milkyway_a0ye1g_c_scale,w_1614.jpg 1614w,
            milkyway_a0ye1g_c_scale,w_2334.jpg 2334w,
            milkyway_a0ye1g_c_scale,w_2831.jpg 2831w,
            milkyway_a0ye1g_c_scale,w_3485.jpg 3485w,
            milkyway_a0ye1g_c_scale,w_4042.jpg 4042w,
            milkyway_a0ye1g_c_scale,w_4479.jpg 4479w,
            milkyway_a0ye1g_c_scale,w_4882.jpg 4882w,
            milkyway_a0ye1g_c_scale,w_5379.jpg 5379w,
            milkyway_a0ye1g_c_scale,w_5475.jpg 5475w"
      src="milkyway_a0ye1g_c_scale,w_5475.jpg" alt="">
</picture>
 

В чем разница между размерами и носителями? Насколько я понимаю, media=»(max-width:767px)» является условием, и следующий код выполняется только в том случае, если размер окна меньше 768 пикселей. Если это так, то какой смысл иметь еще большее количество пикселей в размерах?

Я немного покопался в Sublime Text 3 и обнаружил, что если код очищен, визуальный результат будет таким же:

 <picture>
    <source
    media="(max-width: 767px)"
    sizes="100vw"
    srcset="
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_50.jpg 50w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_656.jpg 656w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_893.jpg 893w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1121.jpg 1121w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1291.jpg 1291w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1452.jpg 1452w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1529.jpg 1529w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
    <source
    media="(min-width: 768px) and (max-width: 991px)"
    sizes="70vw"
    srcset="
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_945.jpg 945w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1222.jpg 1222w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1349.jpg 1349w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
    <source
    media="(min-width: 992px) and (max-width: 1199px)"
    sizes="60vw"
    srcset="
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1068.jpg 1068w,
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1398.jpg 1398w,
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
    <img
    sizes="40vw"
    srcset="
        milkyway_a0ye1g_c_scale,w_480.jpg 480w,
        milkyway_a0ye1g_c_scale,w_1614.jpg 1614w,
        milkyway_a0ye1g_c_scale,w_2334.jpg 2334w,
        milkyway_a0ye1g_c_scale,w_2831.jpg 2831w,
        milkyway_a0ye1g_c_scale,w_3485.jpg 3485w,
        milkyway_a0ye1g_c_scale,w_4042.jpg 4042w,
        milkyway_a0ye1g_c_scale,w_4479.jpg 4479w,
        milkyway_a0ye1g_c_scale,w_4882.jpg 4882w,
        milkyway_a0ye1g_c_scale,w_5379.jpg 5379w,
        milkyway_a0ye1g_c_scale,w_5475.jpg 5475w"
    src="milkyway_a0ye1g_c_scale,w_5475.jpg" alt="">
</picture>
 

Как вы можете видеть, размеры теперь занимают только% экрана, который будет использоваться изображением. Другие параметры ничего не сделали. Я полагаю, как это часто бывает в автоматически сгенерированном коде, что лишний материал бесполезен и может быть очищен для уменьшения размера.
Носитель более ограничен, и поэтому параметры в размерах не просматриваются.