Printable View
Now a days there are different devices are available at different screen sizes,
which is best method we can use pixel or percentage for websites ?
If it is pixel as screen size we use pixel as font size
if it is percentage as screen size we use em as font size/or pt is good ? then line-height, margin, and padding can be set to which one ?
Ems perform best with scalability on mobile devices so are generally better for responsive design.
It comes down to personal preference, but nowadays I generally like to use (r)ems for font-size, line-height, margins and paddings and %/px for layout (% for responsive columns/floats and px for overall max-width limits).
Some useful resources;
http://snook.ca/archives/html_and_cs...-size-with-rem
http://kyleschaeffer.com/user-experi...s-px-vs-pt-vs/
http://www.impressivewebs.com/unders...-em-units-css/
http://www.smashingmagazine.com/resp...nes-tutorials/
@Beverley
Do you feel rem is secure ? Moreover it increases the size of style sheet..
as far as from the information you provided
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
while using rem, we need to code it in pixel also for supporting other old browsers, if we are using rem as font-size and using pixel with it is a complicated thing i mean because we are avoiding pixel while the screen size is taken in percentage, then adding pixel in percentage is not at all incompatible.
if it is only in em it support all browsers, doesn't need additional coding in pixel..
also putting font size in px and font size in rem both will increases the size of style sheet comparing with using em, because we are not using px with em
Like I said, its personal preference so do what you feel most comfortable with. A few extra declarations for older browsers, namely IE 8 and under, isn't going to be that expensive in the grand scheme of things. Support: http://caniuse.com/rem
It sounds like you've already made your decision (as I have), which is good. I believe that's drawn the thread to a convenient close and the linked resources will be useful to anyone else who is curious to research the topic of responsive design too.