移动端的长度单位

在pc端大多少用px单位，px用到移动端就回发现适配各种终端是非常困难的事情，所以我非常少使用px。

1.刚开始为了解决适配问题，几乎都是用到%。

.footer-area {
   background:#f4f4f6;
    100%;                   //和body的宽度一致
   position:absolute;
   bottom:0;
   box-sizing:border-box;        //元素高度和宽度包括边框和内边距
   -webkit-box-sizing:border-box;
}
.input-area {
     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;
       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-359px){
     .patient-sex {
	 padding-left: 12%;  //设备的屏幕0-359px时呈现的样式。
      }
}
@media screen and (min- 360px) and (max- 700px){  
     .patient-sex {
	 padding-left: 15%;  //设备的屏幕360-700px时呈现的样式。

} }

解决适配的三种方法，框架优先考虑%，细节方面用rem、px ,微调考虑媒体查询。

要适应多个屏幕，可以参考博客：http://blog.csdn.net/nczb007/article/details/60140542