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

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

WBOY

リリース： 2016-06-24 12:33:49

オリジナル

1425 人が閲覧しました

この記事では、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 つは外部参照です

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

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