Layout ändern durch Zoomen

Question

Mein Ziel ist es, mein Layout beim Zoomen zu ändern, ähnlich wie ich mein Layout mit einem Fenstergröße-Event ändere.

Nach vielen Suchen habe ich festgestellt, dass Sie ein Zoom-Ereignis in keinem Browser erkennen können. Daher habe ich festgestellt, dass ich @media-Abfragen zum Zoomen verwenden sollte, genauso wie ich für die Fenstergrößenanpassung.

gesagt haben, dass hier was Abfragen sieht meine @media ist wie:

/* 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%; 
    } 
} 

für Fenstergröße große Werke.

Also, zum Zoomen, welche Regel folgt @media ??

Ist es? .

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

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

Answer 1

Während ein Bildschirm mit einer Breite von zum Beispiel Zoomen, 1000px bis 200% des Browser es als eine Breite von 500 Pixeln annimmt und wendet die Stile in @media (max-Breite: 500 Pixel) {}.

Ich hoffe, Sie verstehen das. Wenn Sie CSS zum Zoomen schreiben möchten, müssen Sie Medienabfragen für kleinere Geräte codieren und experimentieren.