반응형 웹 페이지 디자인 - 뷰포트
ビューポートとは何ですか？
ビューポート（viewport）は、ユーザーがウェブページ上で見える領域です。
ビューポートはデバイスによって異なり、携帯電話ではコンピューターのスクリーンよりも小さいです。
タブレットやスマートフォンが登場する前に、ウェブページはコンピューターのスクリーンにのみ設計されており、静的なデザインや固定サイズが一般的でした。
それから、タブレットやスマートフォンでウェブを使い始めたとき、固定サイズのウェブページは視口に適さずに大きすぎます。この問題を解決するために、これらのデバイスのブラウザは、スクリーンサイズに合わせて全体を縮小します。
これは完璧ではありません！急いで修正したものです。
ビューポートを設定することで、
HTML5は、Webデザイナーが <meta> タグを含めることでビューポートを制御してください。
すべてのウェブページに以下の <meta> ビューポート要素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これは、ブラウザにページのサイズとズーム比をどのように制御するかに関する指示を提供します。
width=device-width 一部の設定では、ページの幅をデバイスのスクリーン幅に合わせて設定します（デバイスによって異なります）。
ブラウザがページを最初に読み込んだとき、initial-scale=1.0 初期のズームレベルの一部設定
以下は、ビューポートメタタグを含まないウェブページと、含むウェブページの例です：
ヒント：このページをスマートフォンやタブレットで閲覧している場合、以下の2つのリンクをクリックして違いを確認できます。
コンテンツをビューポートの大きさに調整
ユーザーはデスクトップやモバイルデバイスでサイトを垂直にスクロールすることを習慣としています。水平にスクロールすることはありません！
したがって、ユーザーが全ページを確認するために水平スクロールや縮小を強制される場合、悪いユーザーエクスペリエンスにつながります。
追加で守る必要があるルール：
1. 큰 고정 너비 요소를 사용하지 마십시오 - 예를 들어, 이미지의 너비가 뷰포트 너비보다 크면 뷰포트 수평 스크롤이 발생할 수 있습니다. 이 내용을 뷰포트 너비에 맞게 조정해야 합니다.
2. 내용이 특정 뷰포트 너비에 의존하지 않도록 하십시오 - CSS 픽셀 기준으로 스크린 크기와 너비는 장치 사이에서 매우 다릅니다. 따라서, 내용은 특정 뷰포트 너비에 의존하지 않고 좋은 효과를呈现해야 합니다.
3. CSS 미디어 쿼리를 사용하여 작은 스크린과 큰 스크린에 다른 스타일을 적용하십시오 - 페이지 요소에 큰 CSS 절대 너비를 설정하면 해당 요소가 작은 장치의 뷰포트에 너무 넓아지게 됩니다. 대신, 예를 들어, width: 100%와 같은 상대 너비 값을 사용하는 것이 좋습니다. 또한, 큰 절대 위치 값을 조심스럽게 사용해야 합니다. 이는 요소가 작은 장치의 뷰포트 밖으로 미쳐질 수 있습니다.
