- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hey guys, this is my first post here at css-tricks.com so please spare me if this question is already asked.
When I do responsive site, I generally use start with mobile first, then at certain breakpoint, using min-width, apply different style to utilize the screen estate. Only downside I can think of with this approach is IE<9 require additional CSS or JS to polyfill and even Google recommend using progressive enhancement approach
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints
However When I checked out this site (css-tricks.com, I’m sure 99% of you guys have done it :D ), it uses @media max-width with em’s.
So, my question is, what’s the advantage of using max-width with ems approach over min-width approach? only thing I can think of is to support browser that does not support media query (IE<9).
PS. My wild guess is to add few extra size of css to avoid loading extra polyfill JS? But can’t avoid that with HTML comment or something like yepnope.js?
this is how i usually do the stuff.
if writing code for desktop first then i use max-width approach and if the code is written for mobile first i use min-width but i think it depends person to person what they prefer.