Html Question posted in
Some basic documentation can be found here.

Html – About 'media="(min-width: 0px)" '

About this code (I found a similar code on the Apple website):

<picture>
  <source srcset="1.jpg, 1_2x.jpg 2x" media="(max-width: 734px)" />
  <source srcset="2.jpg, 2_2x.jpg 2x" media="(max-width: 1068px)" />
  <source srcset="0.jpg, 0_2x.jpg 2x" media="(min-width: 0px)" />
  <img src="0.jpg" alt />
</picture>

Question – why ˙(min-width: 0px)? I’m guessing this allows for 2x to be taken into account for the remaining browser window sizes, or are there other reasons?

I try

<picture>
  <source srcset="1.jpg, 1_2x.jpg 2x" media="(max-width: 734px)" />
  <source srcset="2.jpg, 2_2x.jpg 2x" media="(max-width: 1068px)" />
  <source srcset="0.jpg, 0_2x.jpg 2x"  />
  <img src="0.jpg" alt />
</picture>

and got a similar result. Why then specify (min-width: 0px)?

Tags:

2

Answers


  1. 0

    <source> element is used to provide different image sources for different image sizes. <source srcset="0.jpg, 0_2x.jpg 2x" media="(min-width:0px)" /> is work for cases where none of the previous media queries apply. (min-width:0px) ensure that the source is considered if the width doesn’t match the earlier conditions.

    Login or Signup to reply.
  2. 0

    The media attributes of your tags in the element are used to specify the conditions under which a particular image source should be used. You configure image sources for different viewports and widths in your instance. Let’s break that down

    1. Width of the viewport:

    • (max-width:734px): This condition applies when the viewport width is 734 pixels wide.

    • (max-width:1068px): This condition applies when the viewport width is 1068 pixels wide.

    • (min-width:0px): This condition always applies (since the minimum width is 0 pixels).

    1. Image sources:
    • For each viewport’s extension range, image sources are specified using the srcset attribute. Example:

    If the viewport is 734px wide, the browser will select 1.jpg and 1_2x.jpg (for high DPI display).

    In all other cases (including widths less than 734px or greater than 1068px), the browser will use 0.jpg (and its higher DPI if applicable).

    1. Why (min-width:0px)?

    • Which is why it should act as a fallback. If none of the other conditions match (i.e., the viewport is wider than the specified distance), the browser will default to the specified source (min-width:0px).

    • By adding this fallback, you ensure that the correct image is displayed even if the viewport size does not match in any of the other cases.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search