Media Query for different zoom levels?

Asked

Viewed 69 times

1

I would like to use values 'in' in Media Query, only for different types of zoom in the browser like 100% 125% 175% and so it goes.

What values should I use?

html css query

1 answer

1


What happens is that when you zoom in with the browser you’re actually decreasing the width of the screen actually

Ex: If your screen is 1000px wide and you zoom in to 150% in reality it’s like your screen is 500px wide. Here is a calculator that will give you the numbers for your screen: http://mqtest.io/

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

Now thinking of responsive font you can do some testing with the font-size in VW. See in this example. The more vc of Zoom with Browser all fonts increase, less those with the size in VW (red). OBS: This option has to be carefully analyzed especially thinking about 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>

Browser other questions tagged html css query

You are not signed in. Login or sign up in order to post.