In che modo lo zoom del browser influisce sui pixel definiti nei CSS?

Question

Ad esempio: ho un elemento con larghezza di 300 px. Quindi se eseguo lo zoom ho ancora un elemento con una larghezza di 300px ma ogni pixel css sarà più grande. Ma se imposto max-width: 1000px e poi eseguiremo lo zoom in un momento, l'elemento inizia a ridursi. Perché?

Answer 1

Il motivo è perché la larghezza massima impedisce che l'elemento si riduca di dimensioni superiori a 1000 px, ogni volta che la larghezza o lo schermo del contenitore è inferiore a 1000 pixel, l'elemento sarà sensibile al 50% della larghezza.

element { 
    width: 50%; 
    max-width: 1000px; 
} 

Quando si imposta una larghezza fissa di 300px dell'elemento non è più reattivo e non possono ridimensionare secondo lo zoom o il ridimensionamento dello schermo. Pertanto, quando lo zoom nell'elemento mantiene la sua dimensione, quindi nel codice sottostante la larghezza massima non è rilevante in quanto l'elemento non supererà mai 300 px.

element { 
    width: 300px; 
    max-width: 1000px; 
} 

Fatemi sapere se avete domande.