Media Query for different zoom levels?

What happens is that when you zoom in with the Browser you are actually decreasing the screen width actually

Ex: If your screen is 1000px wide and you zoom in to 150% in reality it is as if your screen were 500px wide. Here's a calculator that will give you the numbers for your screen: link

Then you can use the @medias to determine some approximate widths in PX for the Zoom levels. Always remember that the larger the Zoom the smaller the screen width!

• Here's an article on how to deal with and deal with font-size Desktop x Mobile: link (in Google you find more)

Now thinking of responsive source you can do some testing with font-size on VW . See in this example. The more you zoom in with the Browser all the fonts increase, except the ones that are VW (red) size. OBS: This option has to be looked at carefully, especially considering your target audience and the type of device they use!

.vw {
    font-size: 4vw;
}
.rem {
    font-size: 2rem;
}
.pre {
    font-size: 200%;
}
.em {
    font-size: 2em;
}

.rem1 {
    font-size: 1rem;
}
.vw1 {
    font-size: 2vw;
}
.pre1 {
    font-size: 100%;
}
.em1 {
    font-size: 1em;
}

.vw, .vw1 {
    color: red;
}

<h1 class="rem">H1 com 2rem (32px)</h1>
<h1 class="vw">H1 com 4vw</h1>
<h1 class="per">H1 com 200%</h1>
<h1 class="em">H1 com 2em</h1>
<p class="rem1"> < P > com 1rem (16px)</p>
<p class="vw1"> < P > com 2vw</p>
<p class="per1"> < P > com 100%</p>
<p class="em1"> < P > com 1em</p>