Zoom in browsers

[raj080288]

Hi,

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.

Raj

[Alen]

Good read https://css-tricks.com/why-ems/

[raj080288]

What is better to use “em” based or “pixel” based mess queries, and why would the chosen one be better to use?

Thanks

[Paulie_D]

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.

[raj080288]

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.

[Paulie_D]

Heard it where?

Details please.

[raj080288]

On the cloud four blog

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

[Paulie_D]

Good article.

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.

[raj080288]

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

[Author]

Posts