ホームページ > 記事 > ウェブフロントエンド > HTML 解像度の一致 issue_html/css_WEB-ITnose について
HTML 解像度の一致 issue_html/css_WEB-ITnose について
- WBOYオリジナル
- 2016-06-24 11:32:151232ブラウズ
画像内の赤い四角形は、ブラウザーによって表示される部分を表します。
画像には合計 3 つの行があります (div の各行は最初の div を介してフロートされ、2 行目と 3 行目はマージンが調整されています)。異なる解像度の画面でも表示効果は同じだと思います。どうすればこれを実現できるでしょうか。私は本当に理解できません。助けていただければ幸いです。
ディスカッションへの返信 (解決策)
幅と高さは、width;100%; などのパーセンテージ値に設定できます。このパーセンテージは、画面サイズに従って計算されます。 100% は画面の幅と高さです。
表示効果は同じです。この文は曖昧すぎます
たとえば、携帯電話を横にしても縦にしても、まったく同じように表示されますか?
通常の状況では、自然な配置を好みます
div の幅と高さが定義されている限り、float:left はそれ自体で高さをサポートします
複雑な場合には、異なる幅と高さを定義する必要があります異なるディスプレイ画面サイズに応じて div を変更します
最も簡単なことは、赤い div の幅を書き込むだけです
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="robots" content="index, follow" /><meta name="googlebot" content="index, follow" /><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no, minimal-ui" ><style>body{margin:0;padding:0;width:100%;height:auto}ul{list-style:none;margin:0;padding:0}.wrapbox{width:100%;height:auto;} .wrapbox ul{display:table-cell;width:100%;} .wrapbox ul li{display:table-column;width:33.3%;float:left;} .boxitem{border:1px solid #ddd;height:200px;margin:1% 0 0 1%;width:98%;display:inline-block;background-color:#f1f1f1} .boxitem h2{text-indent:0.5em}</style><title>open lab</title></head><body><div class="wrapbox"> <ul> <li> <div class="boxitem"> <h2>Docker 监控实战</h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>Apple Swift语言正式开源，支持Linux </h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>首场HTC Vive开发者峰会开幕在即， 各VR大牛前来分享干货 </h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>C++11之美 </h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>PHP 7.0.0正式版来了 </h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>移动App图标设计的最佳实践</h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>在Node应用中实施Web认证的四大方法</h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>Spark零基础入门（4）：Scala 类和对象</h2> <p></p> </div> </li> <li> <div class="boxitem"> <h2>为什么移动化对企业级应用如此重要？</h2> <p></p> </div> </li> </ul></div></body></html> フレームワークを使用してみてください。比較的簡単です。 。 。 。 。 。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。