Device view in pixels versus media query in rem units

I noticed this because the preview of my site layout at 1200px browser width in Chrome was different to the layout shown in the 1200px device width view of BSS… Chrome had more space and reflected the 1200 device width view in BSS only when I reduced the browser with to 1100px.

In BSS, I have font-size=62.5% under the HTML style and am generally using rem’s as my units. When I noticed the thing above, I realised that my media queries were still in pixels. However, when I changed them to the equivalent rem, they broke the layout.

Sorry this is a rambling way of saying, shouldn’t a media query at 1200px be the same as 120rem, with my font-size set at 62.5% under HTML?

If so, any thoughts on what I’ve done?

The media query at 1200px should be 75rem

360px = 22.5rem
576px = 36rem
768px = 48rem
992px = 62rem
1200px = 75rem
1400px = 87.5rem

1 Like

Thanks, but I’ve overridden the 16px default by putting font-size=62.5% (10px) under html? So it should be 1rem = 10px…

Ah right, it seems that media queries do not use the HTML base font size and just keep with 16px. Ok, I’ll sort it out. Thanks

1 Like

You can customise the grid