HTML 解像度の一致 issue_html/css_WEB-ITnose について-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML 解像度の一致 issue_html/css_WEB-ITnose について

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

画像内の赤い四角形は、ブラウザーによって表示される部分を表します。
画像には合計 3 つの行があります (div の各行は最初の div を介してフロートされ、2 行目と 3 行目はマージンが調整されています)。異なる解像度の画面でも表示効果は同じだと思います。どうすればこれを実現できるでしょうか。私は本当に理解できません。助けていただければ幸いです。

ディスカッションへの返信 (解決策)

幅と高さは、width;100%; などのパーセンテージ値に設定できます。このパーセンテージは、画面サイズに従って計算されます。 100% は画面の幅と高さです。

表示効果は同じです。この文は曖昧すぎます

たとえば、携帯電話を横にしても縦にしても、まったく同じように表示されますか?

通常の状況では、自然な配置を好みます
div の幅と高さが定義されている限り、float:left はそれ自体で高さをサポートします

複雑な場合には、異なる幅と高さを定義する必要があります異なるディスプレイ画面サイズに応じて div を変更します

最も簡単なことは、赤い 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 までご連絡ください。