48

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?

1
  • 1
    There are no benefits to either one, it's like saying give me 50% of 1kg, or 500 grams, depends on your application
    – Jakub
    Sep 2, 2011 at 14:47

9 Answers 9

34

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 :)

2
  • 4
    I have a netbook. Fixed widths are disgusting. Most websites have them somewhere. Doing a mobile design is fine, and a big one, but there is a space in between. Sep 2, 2011 at 14:58
  • 2
    Most Definatly @Nicholas Wilson, however it all comes down to one thing, whats the purpose of the site. What should its design be like, how should it be navigated. Things that are the first items to be discussed when making any website. Sep 2, 2011 at 15:02
10

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.

1
  • 1
    I think % for DIVs is suitable and Px for fonts, more control. :)
    – Ali Gajani
    May 28, 2014 at 13:25
9

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

2

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.

0
2

% 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.

2

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>

1

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.

1

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.

1
  • I have flagged this question itself as off topic because I feel it is primarily opinion-based, so answers will tend to be based on opinion instead of hard fact. Your answer is basically "someone else does it like X, so X must be better", and that's not really much of an answer; it's more a comment.
    – Mike
    Oct 27, 2016 at 12:14
0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.