- This topic is empty.
December 19, 2013 at 11:22 am #158775
They say you have to use ’em’ based media queries which helps with browser zooming issue and prevent the site from breaking.
I am using Twitter bootstrap to make my website which is based on ‘pixel’ based media queries. When I zoom in the browser, my website does not break but adjust to a ‘ipad’ version of the website.
I’m just confused, why do I have to use em based media queries when the same effect can be done using pixel based media queries.
Thanks in advance.
RajDecember 19, 2013 at 10:02 pm #158835AlenParticipant
Good read https://css-tricks.com/why-ems/December 20, 2013 at 11:13 am #158860
What is better to use “em” based or “pixel” based mess queries, and why would the chosen one be better to use?
ThanksDecember 20, 2013 at 11:18 am #158861
It works out the same anyway doesn’t it?
1em = the base px font value.
So if your body has a 16px base value then 1em = 16px.
As long as you know what that base is then it doesn’t matter whether you use px or em.
The important thing is to use the right value/measure when it’s appropriate based on the design.December 20, 2013 at 11:24 am #158862
I heard that using em based media queries helps with browser issues when the user zooms in on the browser, preventing the site to break.December 20, 2013 at 11:29 am #158863
Heard it where?
Details please.December 20, 2013 at 11:39 am #158864
On the cloud four blog
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/December 20, 2013 at 11:57 am #158865
The issue though is this….
It should be noted that, unlike window resizes, which cause media queries to be re-evaluated immediately, you’ll need to reload the current page if you zoom in or out for em-based media queries to re-apply..
That seems like a big UX problem to me. Most users won’t know that they have to reload the page…they’ll just assume your page is broken.December 20, 2013 at 12:10 pm #158866
It is a very good article. I don’t think you need to reload the page. For me, when I zoom in to the browser the page would adjust to the required breakpoint without the user having to reload the page. I’m just so confused with this media query thing. They say em based media queries won’t break the page when zoomed in however, I’m using pixel based media queries with em font size and my site is actually still adjusting
- The forum ‘CSS’ is closed to new topics and replies.