移动端 css/html (box-flex)自适应、等比布局_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:34:391163검색
移动端 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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.