標籤：
移動端 css/html (box-flex)自適應、等比布局對於移動端自適應的一種布局方式。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <style type="text/css"> .boxcontainer{ display: box; display: -moz-box; display: -webkit-box; border: 1px solid red; height: 32px; min-width: 100px; } .boxcontainer>div{ box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; } .boxcontainer>div>input{ min-width: 50px; width: 100%; box-sizing: border-box; height: 32px; border: 0; } .boxcontainer>a{ min-width: 50px; display: inline-block; border: 1px solid red; height: 32px; line-height: 28px; text-align: center; } </style> <body> <div class="boxcontainer"> <div> <input type="text" id="" value="" /> </div> <a href="javsscript:;">搜尋</a> </div> </body></html>
展示：
平板
大手機螢幕
小手機螢幕
本次布局主要是對於
box-sizing: border-box;
和
display: box;display: -moz-box;display: -webkit-box;
box-flex: 1;-webkit-box-flex: 1;-moz-box-flex: 1;
配合的理解，這樣的布局無需擔心width：百分比的溢出問題，全貼合邊框。
參考連結
http://www.css88.com/book/css/properties/flexible-box/box-flex.htm
移動端 css/html (box-flex)自適應、等比布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
