Repository navigation
Confusion with screens definition #360
Description
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: 1080I 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"?
Activity
shadow81627 commentedon Jul 8, 2021
I also get a bit confused by the image size breakpoints I had to define a new set to match Vuetify.
GabGee commentedon Jul 13, 2021
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 commentedon Sep 23, 2021
Anyone using Bootstrap? If so, how did you define the screens for the Bootstrap grid?
nagman commentedon Feb 3, 2022
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 commentedon Feb 3, 2022
I've made a PR with a new
strategyoption 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)