css - Media Queries for Different zoom Levels of Browser -


i newbie responsive design using css3 media queries. understand how target different devices using these media queries place confused browser zooming!!.

for eg: normal body css rule

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

and when want change css rule target devices width falls in range of 150px , 600px add particular media query.

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

problem: using google chrome , when zoom in 200% particular media query comes play.

how know media queries write different zooming levels or put way whats relation between browser zooming levels , pixel width.

after lot searching. found answer.

  • we don't need target browser zooming explicitly using media queries. when zoom our browser behaves different devices.

    eg: if zoom @ level 175% pixel width of our screen size 732px ( you can find relation between zooming , pixel width @ http://mqtest.io/ ) nearby 768px of ipad mini. therefore can target both ipad mini , browser zooming(@175%) using common media query

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

    so if target different devices using media queries (make site responsive different devices) browser zooming taken account.


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -