アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

不言

Sep 27, 2018 pm 02:18 PM

アダプティブレイアウト

フロントエンドレイアウトにはアダプティブレイアウトというレイアウトがありますが、アダプティブレイアウトとは何を意味するのでしょうか。アダプティブレイアウトを実装するにはどうすればよいですか?この記事ではアダプティブレイアウトの意味とアダプティブレイアウトの実装方法を紹介します。

まず、アダプティブレイアウトとはについて見てみましょう。

いわゆるアダプティブレイアウト。Baidu から次の定義を検索できます。アダプティブデザインとは、Web ページをさまざまなサイズの端末デバイスに適応的に表示できるようにする新しい Web デザイン手法とテクノロジーを指します。簡単に言うと、適応性とは、同じページを異なるサイズのデバイスに自動的に適応させ、それによって異なるデバイスに異なるバージョンのページを提供するという問題を解決することです。

アダプティブレイアウトとは何かを理解したところで、アダプティブレイアウトを実装する方法を見てみましょう。

ページのアダプティブレイアウトは、高さアダプティブと幅アダプティブに分けられます。実装方法は実際にはさまざまです。例として 3 列のレイアウトを取り上げます。アダプティブレイアウトの方法です。

1. アダプティブレイアウトの高さ調整

高さ調整では、各モジュールを絶対位置に設定し、中央の自動値を設定します。適応されたモジュールの上部と下部の属性のそれぞれは、先頭モジュールと下部モジュールの高さであり、次に中間モジュールの高さが適応されます。

高さ適応レイアウトのコードは次のとおりです:

<body>
        <div class="top">120px</div>
        <div class="main">自适应</div>
        <div class="bottom">120px</div>
</body>

.top{
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: greenyellow;
    
}
.main{
    position: absolute;
    width: 100%;
    top: 120px;
    bottom: 120px;
    background-color: pink;
    height: auto;
}
.bottom{
    position: absolute;
    bottom: 0;//别漏了
    width: 100%;
    height: 120px;
    background-color:greenyellow ;
}

高さ適応レイアウトの効果は次のとおりです:

アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

2アダプティブレイアウト幅の適応

幅の適応には 3 つの方法があります。1 つは絶対配置を使用する方法、最初に中間モジュールをレンダリングする方法、およびそれ自体をフローティングする方法です。

# これら 3 つのメソッドによってそれぞれ実装されたアダプティブレイアウト (3 列) を見てみましょう

1. 絶対配置を使用して幅アダプティブレイアウトを設定します。

説明: アダプティブモジュールに絶対配置を使用し、左右の列の幅を設定します。原理と高さは自動的に調整されます。適応は同じで、左列と右列はそれぞれ左と右にフロートします。

絶対位置設定の幅アダプティブレイアウトコードは次のとおりです。

<body>
        <div class="left">200px</div>
        <div class="main">自适应</div>
        <div class="right">200px</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.left,
.right {
    width: 200px;
    display: inline;
    height: 100%;
    background-color: greenyellow;
}

.left {
    float: left;
}

.right {
    float: right;
}

.main {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
    background-color: pink;
    display: inline;
}

幅アダプティブレイアウトの効果は次のとおりです。

アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

#2. マージンを使用して、最初に中央のモジュールがレンダリングされ、幅適応レイアウトが設定されます。注: 中央の列が最初にレンダリングされます。アダプティブ 3 列レイアウトと優先レンダリング (読み込み) の鍵: コンテンツは HTML の最初に配置する必要があります。アダプティブ div は左右の前に配置し、親 div に含める必要があります。親 div、left および right モジュールはすべて左にフローティングし、アダプティブ div (つまり、親 div 内の子 div) に margin: 0 200px を設定し、 left の margin-left 属性値をに設定します。 100% の負の数、つまり margin-left: -100%; right の margin-left の属性値を、その幅の負の数、margin-left: -200px に設定します。

注:

アダプティブ div は左右の前に配置し、親 div に含める必要があります。

マージンを使用して、中間モジュールは最初に次のように幅適応レイアウトを設定するコードをレンダリングします:

<body>
        <div class="main"> <!--看清楚，这里用一个父div包住-->
            <div class="content">自适应</div>
        </div>
        <div class="left">200px</div>
        <div class="right">200px</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    width: 100%;
    height: 100%;
    float: left;
}
.main .content {
    margin: 0 200px;
    background-color: pink;
    height: 100%;
}
.left,
.right {
    width: 200px;
    height: 100%;
    float: left;
    background-color: greenyellow;
}
.left {
    margin-left: -100%; //important
}
.right {
    margin-left: -200px; //important
}

幅適応レイアウトの効果は次のとおりです。

3. 独自のフローティングを使用して幅適応レイアウトを設定します。 手順: 中央の列の設定 margin 属性は、左列と右列をそれぞれフローティングにすることです。注: この方法を使用してレイアウトを調整する場合は、HTML の左右の後ろにアダプティブ列を配置する必要があります。

独自の float を使用して幅アダプティブレイアウトを設定するコードは次のとおりです。

<body>        
        <div class="left">200px</div>
        <div class="right">200px</div>
        <div class="main">自适应</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    margin: 0 200px;
    height: 100%;
    background-color: pink;
}
.left,
.right {
    width: 200px;
    height: 100%;
    background-color: greenyellow;
}
.left {
    float: left;
}
.right {
    float: right;
}

幅アダプティブレイアウトの効果は次のとおりです。

##最後に:
知りたい場合は、この記事はここで終わります。アダプティブレイアウトの詳細については、2018 の最新の 8 つのレスポンシブおよびアダプティブビデオチュートリアルの推奨事項をご覧ください。これには、最新の無料ビデオチュートリアルが含まれています。

以上がアダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。