移動端 css/html (box-flex)自適應、等比布局

本文轉載自查看原文 2015-10-27 23:24 5508 前端開發

對於移動端自適應的一種布局方式。

<!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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 box-flex實現三等分布局 css自適應布局移動端flex布局 flex布局與移動頁面適應移動端web app自適應布局探索與總結移動端web app自適應布局探索與總結移動端 rem自適應布局（750的設計稿） HTML5移動端自適應解決方案 PC端自適應布局 css 多欄自適應布局