What us difference between width in % and width in px?

Question

If is create a div which is child of another div, should I set its width in px or in % for designing a responsive website.
Can you please tell me that which one is best?

Answer 1

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature. The value of 1 em means the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an em multiplied by 100.

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

Source

---

A pixel is great if you need to size something to match an image, or if you want a thin border. Pixels are browser dependent. It is the absolute size that you would see on your screen. You may want to go through : w3.org manual

Also, here is a very cool explanation by css-tricks

Answer 2

If you define it in px it will have a fixed width. However if you define it in % it will be relative to te screen's width (or to the containing element). I would prefer to use % as it guarantees that it will (relatively) look the same on every screen. Thus it provides more scalabity.

Answer 3

Zain!

Your question is very complex in nuts and not so much if you look through. An 'iceberg' question.
As for me it depends on your looks about how your div should look like.
For responsive design and position: relative; its about % but therefore if you have specific design use px.
Anyway nowadays to construct complex structures use modules like bootstrap.
For my experience i prefer to use % in static and responsive templates, and px in templates that should shrink or grow at size with animations and stuff like this one.

Answer 4

Go for % because it will create your element with respect to the parent div and make your design device independent. If you use px, your div width/height be fixed and will make your design device dependent. 1 px of my device can be different than your due to variation in resolution. Also if you resize your browser and inspect your design done with % , your design will adapt along with changes you make to the browser window size. whereas, for px it will remain fixed.

Answer 5

Pixels are an absolute length. 1 pixel is equal to 1/96 of an inch. Percentages are relative to another value. 1% is 1/100 of another length, e.g. 50% of a 100px divider is 50px.

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

http://www.w3.org/TR/css3-values/#percentages

refer Link