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 http://mqtest.io/ ) 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.