ホームページ > 記事 > ウェブフロントエンド > HTML が Web デザインを画面の幅に自動的に適応させる仕組み
HTML が Web デザインを画面の幅に自動的に適応させる仕組み
- 零到壹度オリジナル
- 2018-03-21 11:17:0913532ブラウズ
今日は、HTML が Web デザインを画面の幅に自動的に適応させる方法について主に説明します。必要な方は参考にしていただければ幸いです。
Web ページの幅を自動的に調整できるようにします
「アダプティブ Web デザイン」はどのように機能しますか?そんなに難しいことではありません。
まず、Web ページのコードの先頭に ビューポート メタ タグ の行を追加します。
viewport は、Web ページのデフォルトの幅と高さの意味です。上のコード行は で、Web ページの幅はデフォルトで画面の幅と等しく (width=device-width)、元の拡大縮小率 (initial-scale=1) は 1.0、つまり初期サイズです。 Web ページが画面領域の 100% を占めます。
IE9 を含むすべての主要なブラウザーがこの設定をサポートしています。古いブラウザ (主に IE6、7、8) の場合は、css3-mediaqueries.jsを使用する必要があります。