CSSのサイトレイアウト

あなたがウェブを閲覧するとき、私はあなたが彼らの内容のために異なるレイアウト技術を利用するサイトにつまずいたとかなり確信します.あなたがデスクトップ上のモバイルサイトまたはブラウザウィンドウをリサイズすることによって同じサイトを訪問した場合は、これに気づいたかもしれない.
CSSには、異なるタイプのレイアウトがあります.いくつかは他の人より人気があります.また、現代のWebでは、ユーザーフレンドリーではないとして眉をひそめています.いくつかの大きなウェブサイトはまだデスクトップ用のサイトを設計し、別のドメインにモバイルユーザーをリダイレクトします.
この投稿では、CSSのレイアウトの種類とプロジェクトに基づいて選択するか、サイトのユーザーになります.
我々は、これらのレイアウトタイプを示すために、特定のウェブサイトを利用します.サイトは清算的です.サイトを書く時はダウンしていますがinternet archive , 我々はそれがライブだったときにサイトのスナップショットを使用することができます.
Open the snapshot そして、右上隅にあるドロップダウンメニューからレイアウトを変更するに沿って従ってください.
CSSのレイアウトについて話をするときには、4つのカテゴリーに分けられます.

静的

液体

適応

反応

静的レイアウト

サイトがそのコンテンツの静的レイアウトを使用する場合、固定単位は要素をサイジングするために使用されます.また、このブラウザを訪問するWebブラウザに関係なく、レイアウトは同じになります.あなたがモバイルでこの種のサイトを訪問するならば、ブラウザーは水平スクロールバーを加えます.
今日の現代のウェブでは、サイトが本当に彼らに価値がある内容を提供しない限り、ユーザーはこのタイプサイトを避ける傾向があります.
の幅を持つサイトの仮想的な例を取りましょう800px と高さ400px . あなたがデスクトップコンピュータ上のサイトを訪問する場合は、おそらく任意のことに気づくでしょうが、ブラウザウィンドウをリサイズしたり、モバイル上のサイトを訪問する場合は、ブラウザが水平スクロールバーを追加します.
Webアーカイブのスナップショットを開き、ブラウザをリサイズします.
静的レイアウト:デスクトップビュー
静的レイアウト:モバイルビュー.スクロールバーに注意してください

液体レイアウト

液体レイアウトはサイジングの相対単位を使用する.相対単位の例

ems

% (割合)

別の例では物事をクリアしなければならない.サイト幅が設定されている場合80% サイトはいつも持ち上がる80% ブラウザのviewport . デスクトップではこれは問題ではないかもしれませんが、もしデバイスが意図しているものが大きければレイアウトは小さくなります.
液体レイアウト:デスクトップ表示
液体レイアウト:モバイルビュー

適応レイアウト

これは静的なレイアウトに似ていますpx しかし、大きな追加で-.
メディアクエリを使用すると、ブラウザのときに適応レイアウトが変更されますviewport がある幅である.
以下のコードサンプルを見てコメントを読んでください.

/**
  * Here we set the header to 100px. This
  * will be the case for smaller devices
  */
.header {
   width: 100px
}

/**
  * When the resolution is at least 480px
  * we change the header width to 480px. Remember
  * we are using px which is a fixed unit
  */
@media screen and (min-width: 480px) {
  .header {
    width: 300px;
  }
}

例のサイトに切り替えて、レイアウトを変更して、そのサイズを見るために、ブラウザをリサイズします.
デスクトップビュー
適応レイアウト:モバイルビュー
このレイアウトの欠点の1つはコードの保守性ですviewports .

応答レイアウト

Pioneered by web designer Ethan Marcotte 彼のリストの記事を離れて.
応答レイアウトは、相対単位とメディアのクエリを使用して、両方の液体と適応レイアウトから最高の組み合わせです.このデバイスを使用すると、各デバイスの右側のレイアウトを提供することができますviewport サイズ.
応答するレイアウト
次のトピックは、このレイアウト技術についてのみです.
次に、応答性のWebデザイン.