今日は、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を使用する必要があります。
絶対幅は使用しないでください
Webページは画面の幅に合わせてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素を使用することはできません。これは非常に重要です。 具体的には、CSS コードではピクセル幅を指定できません:<span style="font-family:'Courier New';font-size:14px;">width:xxx px;<p></p></span>
のみが指定できます。指定されたパーセント幅: <span style="font-family:'Courier New';font-size:14px;">幅: xx%;<code><span style="font-family:'Courier New';font-size:14px;">width:xxx px;</span>
只能指定百分比宽度:<span style="font-family:'Courier New';font-size:14px;">width: xx%;</span>
或者<span style="font-family:'Courier New';font-size:14px;">width:auto;</span>
<span style="font-family:'Courier New';font-size:14px;">相关推荐:</span>
<span style="font- family :'Courier New';font-size:14px;">width:auto;</span>
<span style="font-family:'Courier New';font-size:14px;"> 関連する推奨事項: </span>
以上がHTML が Web デザインを画面の幅に自動的に適応させる仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。