Why would I ever NOT use percentage for sizes?

by

I am an embedded programmer (no GUI), who codes Angular, and, occasionally, Flutter, for fun.

In general, my apps work, but look like an early 90s GeoCities site 🙂

On thing that I just can’t get my head around – and could someone please explain it like I am five years old – is why I would ever want to use any unit of measurement other than percentage.

Given the number of different devices out there, the new ones appearing daily, and as yet imagined devices, plus, of course, just plain resizing the browser window, it just doesn’t seem to make sense to me.

The Mozilla documentation offers me a staggering choice of

  • cm
  • mm
  • Q
  • in
  • pc
  • pt
  • px

which are all fixed size.

I can also use

  • em
  • ex
  • ch
  • rem
  • lh

which are effectively fixed (with reference to their ratio to a given item), and only make sense with text (can they even be applied to other elements?).

I like the look of

  • vw
  • vh
  • vmin
  • vmax

which are percentages of the viewport, plus of course plain old height: 50%, etc

I am aware of responsive design, but that seems to me to be saying that there are X different screen sizes, then proceeding to use px on each of them, having the same scaling problems on X different screen sizes.

It seems intuitive to me that percentages are the only truly proportional way to define resize-proof sizes, but it can’t be that simple, because every book, tutorial, Udemy curse that I look at seems to use px, or just about anything other than %.

So, please explain it to me like I am five. Why not use % or viewport related sizes on everything?

[Update] text is the least of my concerns. I am more interested in the relative sizes of every element. Of course, I can use flex grid, etc. But even a simple border-radius is not going to scale very will if it is defined in px. I want my page to look identical at all/any resolution(s).

Answer

I, like you and many other people starting to learn CSS, used to think the same thing. However, as I continued to build websites I realized that using percents only leads to uglier websites. There are a few reasons that contribute to this:

  1. Raster type, images, etc. don’t scale perfectly. The browser has to approximate the rendering of these elements when they don’t perfectly line up with the pixels of the screen. Browsers do an alright job of this most the time but there are a lot of cases where they don’t and using percents on everything will pretty much guarantee poor rendering on parts of your page for at least some viewport sizes.

  2. Lack of consistent white space. It’s almost always best to use a unit based on the font or pixel size (like px, em, or rem) for margins and padding because otherwise you’ll have inconsistent white space even when the font size is being changed. This is especially noticeable when the margin or padding is smaller because the white space rendering being 1 pixel off is more noticeable.

  3. It’s harder to maintain. Percents are based on the inherited value, which means that if you have any real amount of nesting of elements (and most websites have a lot) you will have some style rules that are in place to override the inherited value because otherwise the sizing of elements will be inconsistent depending on how an element is nested. This the reason why the rem unit exists.

  4. It’s lazy programming. If your job is to make a responsive website, it’s easy to slap some percentages in there and call it “responsive” when in reality good responsive design will make use of all of the tools (including percentages at times) available to make an optimal website for every viewport.

The units in CSS are all there for a reason. In general the physical world units (cm, in, etc.) aren’t used for web development but the rest are all used regularly when you’ve gotten to a point of being pretty comfortable with them.

The most common units that I use are rem, em (most type should use these first two units if possible), px, %, vw, vh, vmin, and vmax.

Attribution
Source : Link , Question Author : Mawg says reinstate Monica , Answer Author : Zach Saucier

Leave a Comment