Confusion with screens definition

[mickaelchanrion]

Hello!

Am I the only one who gets a lot confused trying to understand how the sizes prop work?

At first glance, I assumed that the default breakpoints were matching the ones proposed by tailwindcss and therefore mobile first (usage of min-width).

But by looking at the generated srcset/sizes, it seems like max-width is being used.

For such props:

sizes: 'sm:100vw md:50vw'
width: 1920
height: 1080

I understand that:

• between sm and md: 100vw
• md and larger: 50vw
• before sm: ???

What I actually get it is:

<img
  src="img.jpg?width=384&height=216"
  srcset="img.jpg?width=640&height=360 640w, img.jpg?width=384&height=216 384w"
  sizes="(max-width: 640px) 100vw, 50vw"
  width="1920" height="1080"  
/>

Which can be translated to:

• until sm: 100vw
• sm and larger: 50vw

➡ So not what's expected

Defining screens that match with tailwind's breakpoints would be:

screens: {
  xs: 639,
  sm: 767,
  md: 1023,
  lg: 1279,
  xl: 1535,
  2xl: Infinity // mhh... 🤔
},

The result is:

<img 
  src="img.jpg?width=512&height=288"
  srcset="img.jpg?width=767&height=431 767w, img.jpg?width=512&height=288 512w"
  sizes="(max-width: 767px) 100vw, 50vw"
  width="1920" height="1080"
/>

Which can be translated to:

• until md: 100vw
• md and larger: 50vw

➡ Seems more appropriate but still not mobile-first approach.

Maybe the documentation should explain a bit more how the responsive is handled under the hood? At least explain that xl means "until device width of 1280px"?

[shadow81627]

I also get a bit confused by the image size breakpoints I had to define a new set to match Vuetify.

[GabGee]

Same goes here.. I was expecting at least to be able to define if use a mobile first or desktop first approach ( https://joegalley.com/articles/mobile-first-vs-desktop-first-media-queries ), most of the website nowadays are developed with a mobile first approach.

[dosstx]

Anyone using Bootstrap? If so, how did you define the screens for the Bootstrap grid?

[nagman]

Would be nice to use keywords like >= and <, so that we can choose between mobile-first and desktop-first. The SCSS include-media package uses this approach, which is very intuitive.

[nagman]

I've made a PR with a new strategy option in the config, which allows us to opt for mobile-first mode. It replaces the media-queries with a min-width syntax, and sort the screens in descending order (while keeping the lowest screen as the default one)