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

ie @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.

Answer 2

I solved like that (.scss)

@media only screen and (min-height: 500px) and (max-height: 800px) and 
 (min-width: 600px) {
  margin-top: 0px;
}