CSSの追加方法を学ぶ

2506 ワード
テキストリンク

レイアウトのリセット


HTMLドキュメントにデフォルトのスタイルがあるとレイアウトが妨げられます.
  • ボックスの開始を正確に(0,0)の位置から、<body>ラベルの基本スタイルに少し空白を持たせたいのですが、
  • width、計算高さはマージンXを含む
    ->ボックス-寸法依存CSSクリア済みページ
    • 各
  • ブラウザ(Chrome、Safariなど)のマージンやフォントなどの基本的なスタイルは少し異なります.
    • * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}
    前述のように(上リンク)ページレイアウトの場合
    通常flex-boxを使って柔軟な箱を作ります.
    コメントサイト

    リアクションWebデザイン


    解像度に応じて幅またはレイアウトを変更して可読性を向上
    Webサイトのレイアウトを作成するときは、訪問者が使用するディスプレイの画面解像度を考慮します.(画面が小さいスマートフォンやタブレットなどのモバイル機器など)

    @media


    これらのタスクを完了できます.
    @media ( max-width: 768px ) {
  body { color: red; }
}
    Webブラウザの横解像度が768 px未満の場合、フォントの色を赤に変更します.これは、モバイルデバイスの解像度に応じてCSSを適切に変更または追加できることを意味します.
    幅を調整するには、HTMLドキュメントの<head>と</head>の間に次のコードが含まれている必要があります.
    <meta name="viewport" content="width=device-width, initial-scale=1">
    イベントオブジェクトターゲット練習問題
    21.1.27