bhavya_w bhavya_w - 22 days ago 12
CSS Question

Media Queries for Different zoom Levels of Browser

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

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.