Layout breakpoints (media queries)
According to modern device screen sizes and Material Design layout guidelines (https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints)
I think it’ll be more correct to have the following breakpoints:
0 <= xs < 600 600 <= sm < 1024 1024 <= md < 1440 1440 <= lg < 1920 1920 <= xl < inf.
What do you think about that @rstoenescu ?
And what about custom breakpoints?
Thanks in advance,
You can change the default break point to anything you like by altering the Stylus variables.
The variables you are looking for are the following:
$breakpoint-xs $breakpoint-sm $breakpoint-md $breakpoint-lg
I know that, but this works locally. When I deploy the project and run “npm install” I loose every change made on local quasar code code.
So I need to set breakpoints natively, I don’t need a workaround.
Oh, then you are doing something wrong :D
Never, never change code in the source folder of an installed dependency (this will even not longer be possible in Quasar 0.14 because too much people misused the src).
Quasar already defines a convenient place to overwrite variables.
Add the variables under
src/themes/app.variables.styllike described here
This should also persist when you run
Despite I knew to do not change Quasar code (I made this request indeed), I didn’t understand that app variables ovverride Quasar ones.
So, thank you very much! Now I get what I need!
Those breakpoints seem like a bad idea. Here is why:
The width available to the application is always less that the width of the device. this is due to the space taken up by the frame of the browser window, among other things. Which is why standard breakpoints are a bit less than the sizes you mentioned
Just my 2 Cents
So there are two types of media-queries, one is
widthwhich only represents the width of the viewport (so no browser frame and additional stuff included) and there is the deprecated
device-widthwhich includes all the stuff (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#device-width).
So the media queries in Quasar should work at the correct size, if not could you please provide a screenshot?