CODEWITHSUNDEEP
css
Mus
Mus

Reputation: 7530

CSS - Percentages or Pixels?

I have been using CSS for many years now, and I have always been a 'percentage' kind of guy, as in I always define heights and widths using percentages as opposed to pixels (except, for example, when setting things such as margins, padding, etc, in which case I use pixels).

I would do something like this:

body{
    height: 99%;
    width: 99%;
    margin-top: 10px;
}

but I often see examples such as this:

body{
    height: 300px;
    width: 250px;
    margin-top: 10px;
}

My question is this: are there any benefits to using one over the other overall, and if so, what are they?

Upvotes: 48

Views: 87127

Answers (9)

Vihan Gammanpila
Vihan Gammanpila

Reputation: 332

Clearly, there is nothing right or wrong.

With pixels, it is easy to position objects relative to each other and controls specific heights and widths.

On the other hand, scaling objects with percentages is easy.% Is the way to go in a modern world like vector graphics. When the screen is large or small you can resize it exactly regardless of resolution.

Upvotes: 0

Andrii Verbytskyi
Andrii Verbytskyi

Reputation: 7631

Use Both =D

You can always combine using both if you are confused about it)

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value).

It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).

.my-class {
    width: calc(100% - 20px);
    height: calc(50% + 10px);
}

Browser Support is surprisingly good. Can I use...

Useful reading: CSS-Tricks

Upvotes: 10

Mahi
Mahi

Reputation: 1727

in inner style top property is in % so it will count as 200px*0.3=60px 

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30%; <<<<<<<<<<<<<<
}
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

Here top is 30px . so it will be as it is. 

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30px; <<<<<<<<<<<<
}
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

Upvotes: 2

akwasiijunior
akwasiijunior

Reputation: 175

There is obviously no right or wrong. Its rather a matter of fluidity.

It's easier to position objects relative to each other with pixels and to control exact height and width.

Scaling objects is on other hand easier with percentages. 50% of the window width will always be half of the window with no matter the screen size.

Upvotes: 1

Chris
Chris

Reputation: 21

% are the way to go in a modern world just like Vector graphics. As screens get larger or smaller you can scale properly regardless of resolution.

Upvotes: 2

Glenn Dayton
Glenn Dayton

Reputation: 1430

I use pixels on my website and I keep a maximum width of 1000px. My website displays properly on my 11" netbook, however does not do very well with mobile devices, but that is what this is for:

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />

I find developing websites in percentages very time intensive, having to consider all re-sizing events, such as:

overflow:scroll;

Pixels and percentages both have their perks, but I would say that pixels would be a better choice because of precision, reliability, and is easier to develop. Also another thing to consider are pixels and percentages for fonts. Here is my rule of thumb:

  • If you are developing a website with percentages, use percentages for the font, for the reasons of keeping proportions correct.
  • If you are developing a website with pixels, use pixels for the font.

If you have people that may need to enlarge the font it is always better to use percentages for the font.

Upvotes: 11

Joseph Marikle
Joseph Marikle

Reputation: 78520

Reasons aplenty! Percentage widths are very useful when it comes to sizing elements relative to something else (browser size for instance). You can have your page dynamically change to fit different circumstances. Pixels on the other hand are useful when you need precision sizes that won't change on you. Some people (e.g. me) use both pixels and percents to position elements how you want them. Others (e.g. people other than me :P) will tell you this is stupid.

Upvotes: 1

Yogurt The Wise
Yogurt The Wise

Reputation: 4489

If you want objects to be the same size not matter what, then pixels(not affected by zooming or screen size). Can also look into using EM's as well. I think EM's are sort of in the middle, where they are affected by zooming, but not by screen size.

Upvotes: 2

Graeme Leighfield
Graeme Leighfield

Reputation: 2985

Mobile webpages. %'s rock for that. As it will (obviously) adjust to suit.

However when you want a fixed width for say example an article of text that you want displayed in a certain way, px's is the winner.

Both have many plus's and minus's over each other :)

Upvotes: 34

Related Questions