html - Should I use px or rem value units in my CSS? -


i designing new website , want compatible browsers , browser settings possible. trying decide unit of measurement should use sizes of fonts , elements, unable find conclusive answer.

my question is: should use px or rem in css?

  • so far know using px isn't compatible users adjust base font size in browser.
  • i've disregarded ems because more of hassle maintain, compared rems, cascade.
  • some rems resolution independent , therefore more desirable. others modern browsers zoom elements equally anyway, using px not problem.

i'm asking because there lot of different opinions desirable measure of distance in css, , not sure best.

tl;dr: use px.

the facts

  • first, it's extremely important know per spec, css px unit does not equal 1 physical display pixel. has always been true – in 1996 css 1 spec.

    css defines reference pixel, measures size of pixel on 96 dpi display. on display has dpi substantially different 96dpi (like retina displays), user agent rescales px unit size matches of reference pixel. in other words, rescaling why 1 css pixel equals 2 physical retina display pixels.

    that said, until 2010 (and mobile zoom situation notwithstanding), px did equal 1 physical pixel, because available displays around 96dpi.

  • sizes specified in ems relative to parent element. leads em's "compounding problem" nested elements progressively larger or smaller. example:

    body { font-size:20px; }  div { font-size:0.5em; }

    gives us:

    <body> - 20px     <div> - 10px         <div> - 5px             <div> - 2.5px                 <div> - 1.25px

  • the css3 rem, relative root html element, new rely on. of july 2012, around 75% of browsers in use support rem.

the opinion

i think agrees it's design pages accommodating everyone, , make consideration visually impaired. 1 such consideration (but not one!) allowing users make text of site bigger, it's easier read.

in beginning, way provide users way scale text size using relative size units (such ems). because browser's font size menu changed root font size. thus, if specified font sizes in px, wouldn't scale when changing browser's font size option.

modern browsers (and not-so-modern ie7) changed default scaling method zooming in on everything, including images , box sizes. essentially, make reference pixel larger or smaller.

yes, still change browser default stylesheet tweak default font size (the equivalent of old-style font size option), that's esoteric way of going , i'd wager nobody1 it. (in chrome, it's buried under advanced settings, web content, font sizes. in ie9, it's more hidden. have press alt, , go view, text size.) it's easier select zoom option in browser's main menu (or use ctrl++/-/mouse wheel).

1 - within statistical error, naturally

if assume users scale pages using zoom option, find relative units irrelevant. it's easier develop page when specified in same unit (images dealt in pixels), , don't have worry compounding. ("i told there no math" – there's dealing having calculate 1.5em works out to.)

one other potential problem of using relative units font sizes user-resized fonts may break assumptions layout makes. example, might lead text getting clipped or running long. if use absolute units, don't have worry unexpected font sizes breaking layout.

so answer use pixel units. use px everything. of course, situation may vary, , if must support ie6 (may gods of rfcs have mercy on you), you'll have use ems anyway.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more