移动端css/html(box-flex)自适应、等比布局_html/css_WEB-ITnose

移动端 css/html (box-flex)自适应、等比布局

对于移动端自适应的一种布局方式。

                                                    
            
                            
            搜索        
    

展示：

平板

大手机屏幕

小手机屏幕

本次布局主要是对于

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