Mobile-css/html (Box-flex) adaptive, equal-ratio layout
A way of layout for mobile-adaptive.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </Head> <styletype= "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> <Divclass= "Boxcontainer"> <Div> <inputtype= "text"ID=""value="" /> </Div> <ahref= "Javsscript:;">Search</a> </Div> </Body></HTML>
Show:
Plate
Big phone screen
Small phone screen
This layout is mainly for
Box-sizing:border-box;
And
Display:box;display:-moz-box;display:-webkit-box;
Box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;
With the understanding that this layout does not have to worry about width: percent overflow problem, full fit border.
Reference links
Http://www.css88.com/book/css/properties/flexible-box/box-flex.htm
Mobile-css/html (Box-flex) adaptive, equal-ratio layout