Layout breakpoints (media queries)

[n.taddei]

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,
Niccolò

[a47ae]

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

[n.taddei]

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.

[a47ae]

Oh, then you are doing something wrong
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.styl like described here

This should also persist when you run npm install

[n.taddei]

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!

[benoitranque]

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

[a47ae]

So there are two types of media-queries, one is width which only represents the width of the viewport (so no browser frame and additional stuff included) and there is the deprecated device-width which 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?

[ehadoux]

Is there any update on this?
Even though the breakpoints can be customized, I don’t think the ones by default are good to go. They put a 13’ Retina and a 21’ into the same category, even though it might look good on one and bad on the other.

[benoitranque]

As before, you can customize the exact breakpoints application wide very easily. This has not changed