在pc端大多少用px單位，px用到移動端就回發現適配各種終端是非常困難的事情，所以我非常少使用px。
1.剛開始為了解決適配問題，幾乎都是用到%。
.footer-area {
background:#f4f4f6;
width: 100%; //和body的寬度一致
position:absolute;
bottom:0;
box-sizing:border-box; //元素高度和寬度包括邊框和內邊距
-webkit-box-sizing:border-box;
}
.input-area {
width: 97%; //作為.footer-area的子元素，它的寬度為它的0.97
height: 36px;
border: 1px solid #abadb2;
padding-left: 0.3em;
padding-right: 0.3em;
border-radius: 5px;
vertical-align: top;
font-size: 16px;
-webkit-box:border-box;
-webkit-appearance: none; //webkit的一個外觀樣式，-webkit有個默認值會影響外觀，所以必須設置為none,清除掉默認的外觀。
-webkit-box-sizing: border-box;
}
<footer class="footer-area" id="footer-area">
<div class="input-area">
<img class="footer-shurui" style="position: absolute;left: 0em;" src="/assets/img/kysr/video.png">
</div>
</footer>
%可以比較好的去解決適配問題，但是有一些寬度太小，實在是不能用%去表示，那么我就利用了下px來衡量，一般都是在5px一下的寬度或者寬度不影響適配的情況下可以使用。
2.另外我還用到了em單位，不過發現感覺也沒用什么卵用，但是em的是怎么計算大小的還是需要了解下。
譬如：移動端的默認字體是16px(最小字體為12px),你在body中定義：
1 <style type="text/css"> 2 body { 3 font-size: 2em; 4 } 5 .text { 6 font-size: 0.5em; 7 } 8 </style> 9 </head> 10 <body> 11 <div> 12 font-size:12px*2 = 24px; 13 </div> 14 <div class="text"> font-size:12px*2 *0.5 = 12px; 15 </div> 16 </body>
3.有人說移動端全部用rem單位。
rem是根據標簽html設置文字大小后,其他標簽設置的rem都是html大小的倍數。計算方式和em差不多，但是參照物卻只有html設置文字。 以后多使用。
4.還利用到vw，vh這兩個我感覺比較爽得單位。
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
“視區”所指為瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，這個對應手機適配作用很大，而且目前主流瀏覽器都是支持的。
我一般在圖片定位高度和寬度的利用它，它是把圖片做出響應式正方形的必殺技。
1 .tooth-introduce { 2 background-color: #ffffff; 3 height: 35.2vw;
width: 35.2vw; 4 padding-top:4.13vw; 5 padding-left: 6.8vw; 6 }
vw和wh原理和%類似，如同 em和rem的關系。vw永遠相對應視口，而%應對與元素的父節點，做一個能適配大多少設備的H5,用%是一個不錯的選擇。尤其是在寬度的處理上。
最近發現部分安卓手機不支持對圖像進行VW和VH來大小定位，可以用div標簽把img包含起來，對div進行定位。
5.有些地方確實不好處理，那有可能用到媒體查詢，如：
@media screen and (max-width:359px){
.patient-sex {
padding-left: 12%; //設備的屏幕0-359px時呈現的樣式。
}
}
@media screen and (min-width: 360px) and (max-width: 700px){
.patient-sex {
padding-left: 15%; //設備的屏幕360-700px時呈現的樣式。
} }
解決適配的三種方法，框架優先考慮%，細節方面用rem、px ,微調考慮媒體查詢。
要適應多個屏幕，可以參考博客：http://blog.csdn.net/nczb007/article/details/60140542