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

時間 2019-11-08

標籤移動 css html box flex 自適應等比佈局欄目無線简体版

原文原文鏈接

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

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

展現：html

平板web

大手機屏幕佈局

小手機屏幕flex

本次佈局主要是對於 spa

box-sizing: border-box;scala

和code

display: box;
display: -moz-box;
display: -webkit-box;

box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;

配合的理解，這樣的佈局無需擔憂width：百分比的溢出問題，全貼合邊框。htm

參考連接blog

http://www.css88.com/book/css/properties/flexible-box/box-flex.htm

相關標籤/搜索