1.px em rem

px
(1) IE無法調(diào)整那些使用px作為單位的字體大小；
(2)國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
(3)Firefox能夠調(diào)整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。
EM特點(diǎn)
(1)em的值并不是固定的；
(2) em會繼承父級元素的字體大小。
rem是[CSS3]新增的一個相對單位（root em，根em），這個單位引起了廣泛關(guān)注。這個單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。

2.單擊li，輸出當(dāng)前l(fā)i在列表的序號

<ul id="list"><li>序號1</li><li>序號2</li><li>序號3</li><li>序號4</li><li>序號5</li><li>序號6</li><li>序號7</li><li>序號8</li><li>序號9</li><li>序號10</li></ul>

第一種：使用事件委托

var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li');
ul.onclick = function(e){
  var e = e || window.event, 
        target = e.target || e.srcElement;
        for(var s in li){
          if(target == li[s]){
            s = parseInt(s)+1;
            alert(s);
            break;
          }
        }
 }

第二種：閉包

function msg(index){
   li[index].onclick = function(){
      alert(index);
    }
 }
for (var i = 0; i< li.length; i++){
      msg(i);
}
msg = null;

第三種：jquery的index()
li.on("click",function(){var index = $(this).index();alert(index);}