ホームページ >ウェブフロントエンド >htmlチュートリアル >モバイル css/html (box-flex) アダプティブ、プロポーショナルレイアウト_html/css_WEB-ITnose
モバイル css/html (box-flex) アダプティブ、プロポーショナルレイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:391162ブラウズ
モバイル css/html (box-flex) アダプティブ、プロポーショナル レイアウト
モバイル側に適応するレイアウト方法。
すごい
ディスプレイ:
タブレット
大きな携帯画面
小さな携帯画面
このレイアウトは主に
用ですbox -sizing: border-box;
および
<!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>
display: box;display: -moz-box;display: -webkit-box;
協力を理解した上で、このレイアウトは幅:パーセントのオーバーフローの問題を心配する必要がなく、境界線に完全にフィットします。
参考リンク
http://www.css88.com/book/css/properties/flexible-box/box-flex.htm
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。