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



  • 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.styl like described here

    This should also persist when you run npm install :)



  • 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 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?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.