Question

I’m having some issues in understanding the CSS numeric attributes in percents.

In this special case, in order that my page is always properly displaid, I thought the best way is to always define numeric attributes in %, like width, height or font-size.

Now what suprises me are following points:

At resolution 1920×1080 and browser in fullscreen mode, zooming in and out affects only the font-size. Why? I thought that the percentual value always refers to the value of the parent node, and since I start from

html{
    width:100%;
    height:100%;
}

the font-size should also be static when zooming, since the size of the html resp. the body doesn’t change.

At resolution 800×600 and the browser in fullscreen mode, obviously the content gets scaled, because the html resp. the body itself is less higher, but the font-size is way too big. Let me show you this comparison:

Now obviously, this makes me think that the percentual value in font-size doesn’t refer to the height of the parent node. So the essential question is: if I want to achieve that a page’s elements and fonts are displayd well on let’s say a usual notebook and a netbook with lower resolution, how should I handle the values? Plus that the behaviour of the page is lovely also when the user zooms?

Addendum: I don’t pasted any code because it seems a general question to me.

Answer 1

You can define text sizes using the small, large, x-small, x-large etc. group of values instead of defining them directly in px. which will give you a more “relative” result.

Another option, the one which I tend to use, is pt. 1pt in CSS is the equivalent 1/72 of an inch. How an inch is defined for a given screen is another matter, but browsers on devices like telephones where this could become an issue tend to work these things out.

One final point to keep in mind is that a CSS pixel is not the same as a screen pixel. It isn’t exactly simple:

If the pixel density of the output device is very different from that
of a typical computer display, the user agent should rescale pixel
values. It is recommended that the reference pixel be the visual angle
of one pixel on a device with a pixel density of 96dpi and a distance
from the reader of an arm’s length.

Not exactly scientific eh? Basically what this means is that you don’t really have to worry about things like retina displays which have huge pixel densities compared to normal computer screens. All this to say that pretty much all CSS measurements are relative in some way. Write your code to be robust and work in the majority of cases, but don’t be surprised when you run into the odd hiccup like you have.