Media Queries for Different zoom Levels of Browser

Question

I am a newbie to responsive design using CSS3 media queries. I clearly understand how we target different devices using these media queries but the place where i am confused is BROWSER ZOOMING!!.

For Eg: This is my normal body css rule

#body {     margin: 0 auto;     width: 70%;     clear: both; } 

and when i want to change this css rule to target a devices whose width falls in the range of 150px and 600px i add this particular media query.

@media only screen and (min-width:150px) and (max-width:600px){  #body {     margin: 0 auto;     width: 90%;     clear: both; }   } 

Problem: I am using Google Chrome and when i zoom in to about 200% then this particular media query comes into play.

How do i know what media queries to write for different zooming levels or to put another way whats the relation between browser zooming levels and pixel width.

Answer 1

After a lot searching. I found my answer.

-

We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.

For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini. therefore you can target both Ipad mini and browser zooming(@175%) by using a common media query

i.e @media screen and (min-width:732px)

So if you target different devices using media queries (make site responsive for different Devices) then your browser zooming is itself taken into account.