ビューポートとメディアクエリ_html/css_WEB-ITnose

viewport:

width=device-width を使用しない場合、ページはモバイル端末のビューポート レイアウトの幅 (width=980px) を超えて拡張されます。 width =device-width を使用すると、ページは適切なモバイル幅 (width=320px) で表示されます。メタ タグを使用できます:

2bb997fab96911d9736ca72e507da69c

viewport - target-densitydpi

この属性について説明する前に、コンピューターのデスクトップを例にして、同じモニターの下で異なる解像度で表示されます。解像度が低いとアイコンが小さく表示され、解像度が低いとアイコンが大きく表示されます

Android では、target-densitydpi=device-dpi が設定されている場合、同じ大きな携帯電話の画面に写真とテキストが表示されます。高解像度のデバイスでは小さく表示され、逆に低解像度のデバイスでは大きく表示されます

ビューポート - スケーリング

ほとんどの携帯電話では、デフォルトでモバイル ブラウザーでズームがトリガーされる場合があります。ユーザーがズームできないようにするには、initial-scale=1.0 を設定します。モバイル ウィンドウを記述する完全な方法は次のとおりです:

a2a52acd4e1c621faba9418983e42732

メディア クエリ

CSS メディア クエリ - max/min-device-width

max-width と min-width は、画面を回転すると更新されます。縦モードは横モードでは最大高になります

携帯画面を回転すると、最大幅と最小幅が更新され、図に示すように、最大​​水平幅が垂直方向の最大高になります。 :

@media only screen and (min-width : 480px) { .box { width:200px; height:200px; background:yellow; } }@media only screen and (max-width : 320px) { .box {width:200px; height:200px; background:red; } }

注: max/min-width と max/min-device-width の違い

文字通りに言えば、1 つは最大/最小幅であり、もう 1 つは最大です。 /minimum device width width=device-width が設定されている場合、max/min-width と max/min-device-width は横向きモードでは同じですが、縦向きモードでは異なります。つまり、max/ です。 min-width は画面を回転すると更新されますが、max/min-device-width は更新されません。デバイスの画面の解像度を確認してください。一部の携帯電話のピクセル比は 1.5 以上です。高解像度のデバイスにレイアウトを実装したい場合は、次のメディア クエリを使用できます:

@media のみ画面と (-webkit-min -device-pixel-ratio : 1.5)、

のみ画面と (-o-min-device-pixel-ratio: 3/2)、

のみ画面と (min-device-pixel) -ratio : 1.5) {

.imagebox {background:(url:"images/high/demo.jpg");}

}

注: 上記の方法を使用した場合、画像は、たとえ上記のルールが使用されない場合

CSS メディア クエリ - 向き

iPhone と iPad の両方に横画面と縦画面があり、それぞれ横画面と縦画面で対応する CSS を使用します

/* iPad (横向き) -- -------- */

@media のみの画面、(min-device-width : 768px)、(max-device-width : 1024px)、および (orientation : 横向き) ) {

/* スタイル * /

}

/* iPad (縦向き) ----------- */

@media のみの画面と (min-device-width : 768px) および(max-device-width : 1024px ) および (orientation : 縦向き) {

/* スタイル */

}