How to write media query at 90% page zoom level

Question

I face text overlapping on one another only when page zoom level is reduced to 90% on Chrome.

So tried

@media all and (min-width: 397px) {
    .add-list li {float: left; display: block; width: 50%;}
}

But Specifying media query condition with 397px impacts behaviours at other zoom levels across browsers

Can anyone please suggest me how write media query for exactly 90% page zoom alone?

Is that possible to code media queries based on pixel ratio(on 90% mode)?

Answer 1

You can put '90vw' inplace of 397px which basically mean 90% of the view-port width

Answer 2

Usually we don't write media queries for different zoom levels. Please refer to a Stack Overflow answer - Media Queries for Different zoom Levels of Browser