css - 90% zoom on browser makes no media query used -

i wrote css media queries deal the width of class:

@media (max-width:1920px) {     .slides {         width: 860px;     } } @media (max-width:1500px) {     .slides {         width: 852px;     } } @media (max-width:1280px) {     .slides {         width: 850px;     } } @media (max-width:1097px) {     .slides {         width: 680px;     } } @media (max-width:960px) {     .slides {         width: 540px;     } } @media (max-width:768px) {     .slides {         width: 410px;     } } 

all of these media queries hitting browser zoom 500% 100%. once 90% none of them being applied. why , doing wrong?

at 90% zoom page has more 1920px, why none of queries apply. don't have default case. add, example:

.slides {     width: 960px; } 

before queries. of course, should change 960px desired width of .slides when on screens wider 1920px.

on 1920px monitor, @ 90%, page's width ~2133px. @ 50% have 3840px , on...

if want .slides percentage of screen, use vw (1vw = {viewport width}/100). example, make .slides 50% of viewports' width, no matter zoom level (unless stronger rule applies, of course):

.slides {      width: 50vw; }