CSS Percentages And Pixels

Question

I like to think of myself as having some serious CSS swagger(I am also a PHP hack, and pretty good at Javascript), but today I was chatting with a designer about a specific situation, and honestly I just did not know the answer to it. I was hoping someone could elaborate on the problem.

Scenario:

I hear many a people say, "Oh I use percentages for everything because of responsive design", but then you go and look at their css, and they are using px all over the place for margins, padding etc.

My problem is that should I be using pixels at all? I'd say the main pain point I have in understanding this, is when it comes to high resolution screens.

For example, I was creating a pretty simple "hero" in which I set the height of my container to 700px tall with a background image and some text, while setting the width of it to 100%. On my screen I was creating it on, it displayed full height of my screen(which was the intention), but when I had someone else view it on a higher resolution laptop screen, the picture was significantly shorter in height, with white space underneath it, failing to fill the whole height of the screen.

I am looking for someone to explain exactly how pixels values are affected on higher resolution screens, and if you should always use percentages.

For example, If I set a container to be 300px wide on a "normal" resolution screen, will that same container be 150px wide on the higher resolution screen, and also look shrunken and terrible?

Say I start using percentages for things like margin and padding, I am curious as to how css would calculate that? For example, say I have a contact form with many inputs stacked on top of eachother, and I do something like the following:

input {
  margin-bottom: 2.5%;
}

Where would the css be calculating that 2.5% from? Does it say, "Make that margin-bottom 2.5% of the height of it's parent? I am just confused as what it would be based off of.

Any input is greatly appreciated. Thank you.

Answer 1

First of all, I want to refer to an answer given on SO that explains the percentage property really good: https://stackoverflow.com/a/31032477/4459695

So should I use pixels?
Using pixels should indeed be avoided in modern Web Design, for a few simple reasons:

1. Pixels are fixed. They do not adapt to different screen sizes or viewports, scalings or layouts. Since mobile first is a goto pattern and responsive Web Design relies on adaptable units, and since pixels are avoidable, - avoid them.
2. High resolution screens are getting more and more mainstream, and if you do not want to adapt to even more media queries (for the larger screens), you should not be using pixels.
3. There are better, more dynamic alternatives. These include vw, vh, em, rem and of course %.

But when to use which unit?
em and rem are really good for font sizes or anything like that. They will easily scale and can be used for margins and paddings too, depending on content size.

% are best used in relative object positioning, not so much in margins, paddings or font-sizes, although they can (margins and paddings are okay, I guess). What I mean by this is that percentages work best when combining them with width, height or anything like that (they work great in flex-layouts, for example).

vw and vh are allrounders - I personally do not use them in specific cases, but they are quite handy sometimes. Best example would be an overlay which should fill the complete viewport.

All those units are dynamic and depend on the viewport. This is great, because this allows for flexible styling. Pixels do not.

Answer 2

% value in margin and padding is always % of the parent's width.

So say you have a <div> with margin-bottom: 25%;, inside another <div> which is 1000px wide, then the bottom margin of the <div> is 1000*25% = 250px.

.container {
  width: 100px;
  background: green;
}

.child25,
.child45,
.child-none{
  background: yellow;
}

.child25 {
  margin-bottom: 25%;
}

.child45 {
  margin-bottom: 45%;
}

<div class="container">
  <div class="child25">This one should have 25px margin bottom.</div>
  <div class="child45">This one should have 45px margin bottom.</div>
  <div class="child-none">This one has no margin</div>
</div>

As for your hero problem, if you want the hero's height to be full screen's height, use height: 100vh;, which mean 100% of the viewport's height.

A 700px height element will always be 700px high on any screen. The different in real-life perceived size is because of the screen's ppi (pixel per inch), or dpi (dot per inch) as they are usually called on mobile devices. The value refer to the number of pixel/dot that fill each real-life inch on that screen.