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
Post a Comment