在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; 4 padding-top:4.13vw; 5 padding-left: 6.8vw; 6 }
vw和wh原理和%类似，如同 em和rem的关系。vw永远相对应视口，而%应对与元素的父节点，做一个能适配大多少设备的H5,用%是一个不错的选择。尤其是在宽度的处理上。
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://www.cnblogs.com/liuyinlei/p/4914202.html