Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: srcset/sizes head scratcher
Thanks for the help.
I also find min-width far easier, conceptually. In a stylesheet, it makes sense to me to have all the mobile rules first and then say “ah, but if the minimum screen width is such-and-such than add/tweak this” and work up from there, progressively adding blocks that do more. It just seems logical.
When I pick up a project where the previous dev has done max-width or has intermingled media queries throughout the file, my head goes into a spin and it takes me far longer to unpick everything or make changes.
Anyway, you’re right, I’m going to ditch the 300px image and do a 600px one as minimum. That might just solve everything anyway as if it goes wrong on smaller devices, it’ll only stretch up a bit to 768, which is probably acceptable.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: srcset/sizes head scratcher
philwareham wrote #326031:
It’s important to remember though that
800pxand800ware not the same.
Hmm, have I been understanding this wrong all this time? Or did you mean to write vw and not w? I didn’t know you could specify px values in the srcset attribute. I thought it had to be w or x.
And for the sizes attribute, I thought the only options were px, em or vw as a fraction of viewport width with 100 being full width. AFAIK here w is not an option.
TLDR; I’d provide a range of images from
600w,800w,1200wand1600wand let the browser decide what is the best image to use.
Yep, agree with you here :-)
TXP Builders – finely-crafted code, design and txp
Offline
Re: srcset/sizes head scratcher
jakob wrote #326034:
Hmm, have I been understanding this wrong all this time? Or did you mean to write
vwand notw? I didn’t know you could specify px values in thesrcsetattribute. I thought it had to beworx.
No, Phil is correct. in the srcset attribute, you give the browser a list of images and specify the pixel-width of that list-item through w. In the width attribute, you specify the pixel size on the page (which you then override or fine tune through your stylesheet). then the browser can decide which of the items in the list form the srcset is most adequate, given the final width, the screen density (a 3x iphone, a retina iMac, a old Lenovo laptop with low screen density, … ?), etc. the sizes attributes gives additional guidelines here.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline