CSS3_html/css_WEB-ITnose を通じてレスポンシブ Web デザインを実装する方法

CSS3 を通じてレスポンシブ Web デザインを実装する方法:

それは 3 つのステップに分かれています: (1) Web ページの幅が自動的に調整されるようにします。まず、ページ ヘッダーに次の行を追加する必要があります: ビューポートは Web のデフォルトの幅と高さです。デフォルトでは、幅は自分の画面の幅と等しく (width=device-width)、元の拡大縮小率 (initial-scale=1) は 1.0 です。これは、Web ページの初期サイズが 100 を占めることを意味します。画面領域の %。 (2) フローレイアウト。絶対幅のレイアウトとフォント サイズを使用しないでください。つまり、CSS コードでは、幅と高さを定義するときに px (幅: px) を使用できません。パーセント (幅: %) または (幅: auto) のみを使用できます。高さと幅を定義します。フォント サイズの定義にも、絶対単位 (px) ではなく相対単位 (em) が使用されます。 (3) Media query (メディアクエリ) @media のみ screen と (max-width: px) 画面が数値以下の場合は max-width が実行され、画面が数値より大きい場合は (min-widt) が実行されます。数値以上。