手机webapp开发之按钮自适应布局

需求引入：

在手机webapp开发中，因为手机屏幕的大小各异，为了适应各类大小的屏幕，咱们一般会有这样的实现需求，即在一行中，一个按钮是自适应宽度显示，一个按钮是固定宽度显示。

 

实现方法：

1. 绝对定位：第一时间咱们想到的多是这种方法，也是早期实现这样需求的一种方法，自适应按钮不指定宽度，经过绝对定位来指定left，right来自适应。简单实现demo以下

2. .box{position:relative;line-height:40px;text-align:center;}
   .btn1{position:absolute;left:10px;top:0px;right:140px;height:40px;border:1px solid gray;border-radius:6px;}
   .btn2{position:absolute;width:120px;right:0px;top:0px;height:40px;border:1px solid gray;border-radius:6px;}

   <div class="box">
       <div class="btn1">自适应宽度按钮</div>
       <div class="btn2">固定宽度按钮</div>
   </div>

    

3. 经过指定CSS3的box-flex属性来实现，父容器须要指定display:-webkit-box;display:-moz-box，支持chrome和firefox浏览器

4. .box{display:-webkit-box;display:-moz-box;line-height:40px;text-align:center;}
   .btn1{height:40px;border:1px solid gray;border-radius:6px;margin-right:20px;-moz-box-flex:1.0;-webkit-box-flex:1.0}
   .btn2{width:120px;height:40px;border:1px solid gray;border-radius:6px;}

   <div class="box">
       <div class="btn1">自适应宽度按钮</div>
       <div class="btn2">固定宽度按钮</div>
   </div>

    box-flex属性规定子元素能够根据父容器宽度进行伸缩，截至目前，没有浏览器支持box-flex属性，firefox支持-moz-box；chrome支持-webkit-box；子元素经过

   -moz-box-flex或者-webkit-box-flex属性来设定相对伸缩值，多个元素能够成比例设置，也能够一个固定宽度，另一个自适应伸缩，见例子。