モバイルウェブ

使用したツール:

FireFox ブラウザ

Sublime Text 2

レスポンシブ レイアウト定義:

2010 年、Ethan Marcotte は、オリジナルのテキストを表示できることを提案しました

平たく言えば、パーセンテージ レイアウト、ディスプレイ。異なるレイアウトさまざまなデバイスに応じて;

今回の主な解決策は次のとおりです: 従来の固定ピクセル数 (px) と比較して:

異なるディスプレイデバイスは異なるレイアウトを使用します。例: PC 画面には 3 列が表示されます。携帯電話では 1 列が表示されます。メディア クエリが使用されます。例:

@media screen および (min-width: 481px): 最小画面は 481px です。 481px より大きい;

@media screen および (max-width: 480px): 最大画面サイズは 480px です。つまり、480px 未満の場合に適用されます。

@media print および (モノクロ):プリンター、白黒、適用可能;

使用される幅の割合、水平および垂直画面が自動的に拡大および縮小されます。

最初に元の素材のダウンロード:

PC 画面、次のように 3 つの列が表示されます:

携帯電話の画面、不完全な表示:

まずは HTML の構造を見てみましょう:

CSS は固定数のピクセルを使用します。わかりやすくするために、レイアウト関連の CSS のみに焦点を当てます:

PC では 3 列が表示され、携帯電話では 1 列の CSS が表示されることに注意してください:

.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}.header, .navigation, .footer {clear: both;} @media screen and (min-width: 481px){body, .header, .navigation, .footer {width: 960px;}.column {margin: 10px 10px 0 0;}.navigation ul li {width: 320px; /* 960/3 */}#visit {width: 240px;float: left;}#points {width: 240px;float: right;}#main {margin: 10px 260px 0 250px;width: 460px;}}@media screen and (max-width: 480px){body, .header, .navigation, .footer {width: 320px;}.column {margin: 10px 0;/*红色分割线*/border-bottom: 1px dashed red;}.navigation ul li {width: 106.67px; /* 320/3 */}#visit,#points,#main {width: 320px;}}

PCディスプレイ効果はありません変更されました。

携帯電話の表示効果が縦スクロールの 1 列に変更されました。これがモバイル Web の始まりです。

画像が引き伸ばされているため、ここでは水平スクロール バーが表示されます。

最後のステップは、内部の幅ピクセルをパーセンテージに変換し、親要素をサポートせずに画像のサイズを制御することです:

.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}.header, .navigation, .footer {clear: both;} @media screen and (min-width: 481px){body, .header, .navigation, .footer {width: 100%;}.column {margin: 10px 1.042% 0 0;}.navigation ul li {width: 33.33%; /* 960/3 */}#visit {width: 25%;float: left;}#points {width: 25%;float: right;}#main {margin: 10px 27.083% 0 26.042%;width: 47.92%;}}  @media screen and (max-width: 480px){body, .header, .navigation, .footer {width: 100%;}.column {margin: 10px 0;border-bottom: 1px dashed red;}.navigation ul li {width: 33.33%; /* 320/3 */}#visit,#points,#main {width: 100%;}}img, object{max-width: 100%;}

携帯電話の水平スクリーン効果:

全文終わりました！