手機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屬性來設定相對伸縮值，多個元素能夠成比例設置，也能夠一個固定寬度，另一個自適應伸縮，見例子。