手机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属性来设定相对伸缩值，多个元素可以成比例设置，也可以一个固定宽度，另外一个自适应伸缩，见例子。