你的位置:首页 > 网页设计

[网页设计]移动端 css/html (box


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