ズームを使ってレイアウトを変更する

Question

私の目標は、ウィンドウのサイズ変更イベントでレイアウトを変更するのと同じように、ズーム時にレイアウトを変更することです。

多くの検索の結果、すべてのブラウザでズームイベントを検出できないと判断しました。したがって、ウィンドウのサイズ変更の場合と同様に、ズームのために@mediaクエリを使用する必要があると判断しました。ウィンドウのサイズ変更のための素晴らしい作品

/* LARGE window */ 
@media (min-width: 601px) { 
    .mainContent { 
     font-size: 125%; 
    } 

    .infoHeaderTextStyle { 
     font-size: 160%; 
    } 
} 

/* SMALL window */ 
@media (max-width: 600px) { 
    .mainContent { 
     font-size: 100%;            
    } 

    .infoHeaderTextStyle { 
     font-size: 100%; 
    } 
} 

：

がいることを言って、ここでは私の@mediaクエリは次のようになります。

ズームのために、どのようなルールが続くのですか？@media ??

ですか？

@media (font-size > 20px) { 
    /* ZOOMED IN */ 
} 

@media (font-size <= 20px) { 
    /* ZOOMED OUT */ 
} 

Answer 1

例えばための幅の画面をズームしながら、1000px〜200％ブラウザは500pxなどの幅とそれを前提と@mediaにスタイルを適用する（最大幅：500pxなど）。{}。

これをご理解いただきますようお願い申し上げます。 ズーム用のCSSを書きたい場合は、より小さいデバイス用のメディアクエリをコーディングして試してみる必要があります。