ホームページ > 記事 > ウェブフロントエンド > [演習] レスポンシブレイアウト_html/css_WEB-ITnose
[演習] レスポンシブレイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:33:491405ブラウズ
この記事では、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を試してみてください。
追加1ddfe1c59703ea9a74332e8efca2926c ブラウザの自動スケーリングを避けるそしてユーザースケーリング。 (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 つは外部参照です
モバイル デバイスのトラフィックを節約し、読み込み時間を短縮できます。
さて、練習はすべて終わりました、練習しましょう。