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

移动端 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

posted @ 2015-10-27 23:24  JasNature  阅读(6225)  评论(0)  编辑  收藏  举报
我要赞个
我要评论
我要收藏