[演習] レスポンシブレイアウト_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

[演習] レスポンシブレイアウト_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

この記事では、http://www.netmagazine.com/tutorials/build-basic-sensitive-site-css を参照して行われた演習について説明します。

レスポンシブデザインでは、ユーザーが PC 上でコンテンツを見つけることができるのに、モバイル端末ではそれを見つけることができないと説明しています。したがって、レスポンシブデザインで行う必要があるのは、コンテンツを変更するのではなく、適切に拡大縮小し、さまざまなデバイスに適切なレイアウトを表示することです。したがって、レスポンシブレイアウトは、流体レイアウト (パーセンテージを使用して各要素の幅を設定) と CSS3 メディアクエリを使用して実装されます。

簡単なレスポンシブレイアウトの演習を行ってみましょう:

効果については、http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-sensitive-site-with を参照してください。 -css/demo/demo.html

1. まずドキュメントの構造 (2 列レイアウト) を決定します。

<!doctype html><html><head>    <meta charset="UTF-8">    <title>Responsive</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>    <link rel="stylesheet" type="text/css" href="css/responsive.css"></head><body>    <div id="wrapper">        <header>            <nav id="skipTo">                <ul>                    <li>                        <a href="#main" title="skip to main content">skip to main content</a>                    </li>                </ul>            </nav>            <h1>Demo</h1>            <nav>                <ul>                    <li><a href="#" title="home">Home</a></li>                    <li><a href="#" title="about">About</a></li>                    <li><a href="#" title="work">Work</a></li>                    <li><a href="#" title="contact">Contact</a></li>                </ul>            </nav>            <div id="banner">                <img src="images/kaws.jpg" alt="banner">            </div>        </header>        <section id="main">            <h1>Main section</h1>            <p>Lorem （省略一些内容）</p>        </section>        <aside>            <h1>Sub-section</h1>            <p>Lorem （省略一些内容）</p>        </aside>    </div></body></html>

ログイン後にコピー

オリジナルの作成者はie6-8が実行できることを確認するためにrespond.min.jsを挿入しました。私は互換性テストを行っていないので、興味のある学生はこのjsを試してみてください。

追加ブラウザの自動スケーリングを避けるそしてユーザースケーリング。 (width - ビューポートの幅、initial-scale - 初期ズーム率、minimum-scale - ユーザーがズームできる最小比率、maximum-scale - ユーザーがズームできる最大比率、 user-scalable - ユーザーが手動でズームできるかどうか)

2. 基本スタイルを追加します。 #skipTo のナビゲーションは、ユーザーがナビゲーションをスキップしてメインコンテンツを直接表示できるようにモバイルデバイス向けに設定されているため、基本スタイルでは非表示になります。大きな画面での過度の拡大を避けるために最大幅を設定し、フローレイアウトに適切に適応できる画像の幅を 100% に設定することが最善です。

#wrapper{    width: 96%;    max-width: 920px;    margin: 0 auto;    padding: 2%;}#main{    width: 60%;    margin-right: 5%;    float: left;}aside{    width: 35%;    float: right;}header h1{    height: 70px;    width: 160px;    float: left;    display: block;    background: url(../images/demo.gif) 0 0 no-repeat;    text-indent: -9999px;}header nav{    float: right;    margin-top: 40px;}header nav li{    display: inline;    margin-left: 15px;}#skipTo{    display: none;}#skipTO li{    background: #b1fffc;}#banner{    float: left;    margin-bottom: 15px;    width: 100%;}#banner img{    width: 100%;}

ログイン後にコピー

3. モバイル端末に合わせたCSSを追加します。方法は 2 つあり、1 つは CSS に組み込む方法で、以下のコードを CSS に追加します

@media screen and (max-width: 480px) {    #skipTo {        display: block;        }        header nav, #main, aside {        float: left;        clear: left;        margin: 0 0 10px;         width: 100%;        }            header nav li {            margin: 0;            background: #efefef;            display: block;            margin-bottom: 3px;            }            header nav a {                display: block;                padding: 10px;                text-align: center;                }            }

ログイン後にコピー

もう 1 つは外部参照です

モバイルデバイスのトラフィックを節約し、読み込み時間を短縮できます。

さて、練習はすべて終わりました、練習しましょう。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7698

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。