Media Queries
- Thread starter RDB
- Start date
Edge
Member
I think we're moving towards an approach whereby content decides the breakpoints. So basically create your mobile layout. Widen the viewing port until it looks shit then create a breakpoint. That's the idea and it sounds easy enough if you're working on your own but carrying a client through that process is another matter.
I start mobile first and only use min-width
I've found it a lot easier that way
by defining a min and a max on a media query, there is no cascading effect whatsoever, any selectors defined in that query will only effect that query.
for arguements sake, say you had a div on mobile first it was 100% width
then for your min-width:xxx max-width:xxx query it was 50%
beyond your max width you want it to be 50% still, however it will go back to the 100%, unless it's specified again,
however with only a min width it will stay at the 50%
if that makes any sense
I've found it a lot easier that way
by defining a min and a max on a media query, there is no cascading effect whatsoever, any selectors defined in that query will only effect that query.
for arguements sake, say you had a div on mobile first it was 100% width
then for your min-width:xxx max-width:xxx query it was 50%
beyond your max width you want it to be 50% still, however it will go back to the 100%, unless it's specified again,
however with only a min width it will stay at the 50%
if that makes any sense
also when you work in a studio full of imacs which are all at a resolution of 2560px
or older ones at a resolution of 1920px
my laptop is 1280, my old laptop is 1366 and my 19" screens are 1440.
I can see the benefit of a higher query, and really 960px wide sites bore me these days.
if you can make it flex and work well on mobiles, tablets what not, why not go that extra step for the ever increasing amount of folk on larger screens?
they'll thank you for it.
or older ones at a resolution of 1920px
my laptop is 1280, my old laptop is 1366 and my 19" screens are 1440.
I can see the benefit of a higher query, and really 960px wide sites bore me these days.
if you can make it flex and work well on mobiles, tablets what not, why not go that extra step for the ever increasing amount of folk on larger screens?
they'll thank you for it.
But how many visitors in your target audience are likely to be using one?
This is a valid point Chris. But you never know.
Exactly. Even if you do not use analytics for all your site stats, a simple Ajax function that writes screen.width to a database table or a flat file datastore can gather that information from your visitors.