There is a way to change breakpoints, but only px values.
If you build something and then inspect it in the browser, you can see that the media queries retain their px units.
@Sebastian Petrovski no, we help you convert from px to other units when you change the unit, but its not done automatically. Also em/rem are good for typography only, not for everyhting. People overuse these.
watched the video for a few seconds, she gave a terrible advice to use the width of the panels in rems. Terrible. Not even my personal opinion, there are very well written articles from trusted sources about this.
Hi Oleg, thanks for replying. Ok, I'm inclined to just flatly accept what you say as 100% correct because everything about Webstudio is so well thought out.
But, so I can learn and understand better; can you please point me to one of the trusted sources? It'd be great to learn more and maybe use that source for further learning. I'm mostly self taught in web dev so I usually figure out "best practises" by trial and error. If I can shortcut that a little with some trusted sources in the future it would be amazing.
p.s. I'm not sure how much or what part of the video you watched. I think she only suggests doing the panels in REM if the breakpoints/media queries are in REM also.
She seems to be suggesting that doing everything in REM will make the whole site scale better for people that use scaling accessibility settings to magnify websites on their device/browser.
I am still looking for that article I had in mind
but overall, the problem with using rem for everything is that instead of making sure text fits well and can grow responsively at zoom while controling the size, it just bases everything on font size. That doesn't make sense for other content than text and also even for text the proportion betwen panel width for example and font size isn't necessarily the same. With every zoom level increasing the font size, it doesn't mean the same proportion should be applied to panel sizes.
Panel szies should be in some relative value to the screen width, e.g. vw or %
What she describes works exactly for that type of content well that she was showing - text only.
I only saw a few minutes and it sounded like she recommended to generally use rems for everything.
TLDR you want to make sure that text scales well according to accesibility recommendations while preserving the layout and overal appearance
He actually argues that using rem in media queries / breakpoints is rem is a good idea, so that the switch between mobile and desktop layout happens based on the amount of the available space after zoom
I guess for blogs and such this might be actually a good idea
Hi Oleg, thanks so much for taking the time to explain your perspective and share these articles. They look great. I'm going to comb over them on the weekend. I'm really keen to get a better understanding of some of the different layout tools available for web design/dev.
interesting, i think i can see how that would work especially for simpler layouts where maybe you just want everything to scale proportionally for users that need it - Is there anything in the way of Webstudio getting REM breakpoints/queries as an option?
p.s. how about these toggle sounds 👌
