All geek questions in one place

The font size and pixel size of the device

Let's say that I have the default font size set to 16px (this should be redundant, since in most browsers it is the default):

For brevity, my site has a 10x x 10m field.

  body, html 
 {
     font-size: 16px;
 }
 .box {
     border: 1px green solid;
     background-color: green;
     width: 10em;
     height: 10em;
 }

My site is already responding to min-width media queries for specific breakpoints given by em values ​​(36, 62, and 85em).

The only thing my site does is change the width and color of the window.

  @media (min-width: 36em) {
   .box {
     width: 36em;
     border: 1px red solid;
     background-color: red;
   }
 }
 @media (min-width: 62em) {
     .box {
         width: 62em;
         border: 1px blue solid;
         background-color: blue;
     }
 }
 @media (min-width: 85em) {
     .box {
         width: 85em;
         border: 1px orange solid;
         background-color: orange;
     }
 }

Now let me say that I have a device with a resolution of 1440x900, where browsers decided that the pixel density of the device is 2dppx by default. As a result, everything looks much bigger than it should be. And I do not like it.

But the solution should be easy, right? Just add a media query at startup for a 2dppx pixel density and since it is twice as large as the pixels, I just reduce the font size by half ... which should work, right?

And since I use "em" in everything, by changing the font size by half, I automatically reduce the size of everything by "em" sections by half ... right?

  @media (min-resolution: 2dppx) {
     body, html {
         font-size: 50%;
     }
 }

corresponding jsFiddle

Well, I found that this did not work, because I thought it was ... I tried to answer Google, but did not find anything suitable, I suspect I don’t understand how font sizes, ems and pixel density work ...

  • Reducing the font size by 50% reduces the font size much more than half. The initial size is 16 pixels, but the font size: 50%; results in a font significantly smaller than the font size: 8px ... Tested in Firefox and Chrome. Does anyone know why?

  • When I set the font size: 8px; in the media query for 2dppx, the media queries for min-width: 36em, 62em and 85em do not work, as I expected, at least when I change layout.css.devPixelsPerPx in Firefox. The minimum width in a media request behaves the same as the font size is still 16 pixels, although it changed using the dppx media request. Tested in Firefox and Chrome. Does anyone know why this is?

UPDATE

It looks like media requests load in a 1dppx context, no matter if you use "em", it seems that they are cached on load, and values ​​like min-width are fixed to the first value and although you change the base font size in different media queries, other queries are not updated.

The only solution I can think of right now is to multiply all media queries. One media query for the px value in 1 dppx context and another media query for the px value in 2 dppx contexts (which is 50% of the first value).

+5
source share
1 answer

Thanks to Mr. Lister in the comments, I found out that this:

  @media (min-resolution: 2dppx) {
     body, html {
         font-size: 50%;
     }
 }

... not what I intended to do. The 50% rule works for the <html> tag and for the <body> . The resulting font size is not 8px in the body, but 4px, because 50% in html is 8px, and another 50% in the nested body tag results in 4px.

What I intended to do is the following:

  @media (min-resolution: 2dppx) {
     html {
         font-size: 50%;
     }
 }

Font size issue resolved.

For media query: I found out that dimensions in @media queries ignore pixel density, but dimensions in the body of the CSS rule do not work. Since I use the sizes "em" and SASS, I can simply replace all @media requests with this mixin (example with 2dppx):

  @mixin media-min-width ($ min-width) {
     @media (min-width: $ min-width), (min-width: $ min-width / 2) and (min-resolution: 2dppx) {
         @content
     }
 }
+1
source

Source: https://habr.com/ru/post/1271232/

More articles:


All Articles