ビューポートの制御メカニズム
モバイル端末における表示領域（ビューポート）は、PC向けサイトを表示する際にデフォルトで980px幅が割り当てられます。この設定では横スクロールが発生するため、<meta name="viewport">タグで表示領域を端末画面サイズに適合させる必要があります。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
</head>この設定により、ブラウザは物理ピクセルとCSSピクセルの比率を自動調整し、表示崩れを防止します。
Retinaディスプレイ対応手法
高解像度ディスプレイでは、物理ピクセル密度が標準の2～3倍高くなります。画像のぼやけを防ぐためには、画像サイズを2倍または3倍にし、CSSで表示サイズを元のサイズに縮小する必要があります。
.product-image {
width: 150px;
height: 150px;
background-image: url('product@2x.png');
background-size: 150px 150px;
}背景画像のサイズ調整にはbackground-sizeプロパティが有効です。coverやcontainキーワードを使用することで、コンテナ内での表示方法を制御できます。
適応型レイアウトの実装パターン
流動レイアウトの設計
要素の幅をパーセンテージで指定し、calc()関数でマージンを調整します。ボックスモデルの計算方法をborder-boxに設定することで、パディングを含めた寸法制御が可能になります。
.container {
box-sizing: border-box;
padding: 0 15px;
}
.content-block {
width: calc(33.33% - 10px);
margin-right: 15px;
}メディアクエリによる応答設計
画面幅に応じてレイアウトを切り替える際は、ブレークポイントを端末の実際の表示領域に基づいて設定します。以下は750px未満の端末向けのスタイル例です。
@media (max-width: 750px) {
.main-section { width: 100%; }
.sidebar {
display: none;
position: fixed;
bottom: 0;
}
}rem単位を活用したスケーラブルデザイン
HTMLルート要素のフォントサイズを基準単位（例:100px）に設定し、全要素でrem単位を使用します。この方式では、JavaScriptでルートサイズを動的に調整することで、画面サイズに応じたスケーリングが実現可能です。
:root { font-size: 100px; }
.header { padding: 0.2rem; }
.card { width: 2.5rem; margin: 0.15rem; }開発効率向上のため、CSSプリプロセッサでpxからremへの自動変換を設定することが推奨されます。