Search code examples
cssmedia-queries

Why is it an issue if media queries "snap" from one set of rules to the next?


The following quote comes from here: http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-3142768

"Any fixed-width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two."

But, I can't help but wonder why this matters. Sure, the transitioning is smooth and looks pretty when a developer is playing around with browser size, but what visiting customer (on an ecommerce site or blog) is realistically going to be doing this?? In general, visitors will visit on one device at a time, click around, then leave. Even if they come back on another device, smooth transitioning isn't necessary for the UX, so, why do we care about linear progression between media queries?


Solution

  • This became a practical issue for us in one of our eCommerce clients, the "change" in size would occur when someone switches from landscape to portrait (especially in devices like iPhone where the width is significantly different) i.e. hoding the device vertically and then shifting to horizontal or the other way around and in fact since we used media queries there was a very minor delay (a fraction of a second) in the layout adopting to the new width.

    Another realistic scenario is that people may switch between restored and maximised versions of browsers , then again as commented, wasting spaces is also an issue.