Home > Article > Web Front-end > 移动端 css/html (box-flex)自适应、等比布局_html/css_WEB-ITnose
移动端 css/html (box-flex)自适应、等比布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:391090browse
移动端 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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：3种炫酷CSS3复选框checkbox动画特效_html/css_WEB-ITnoseNext article：锚点链接以及hash属性_html/css_WEB-ITnose