I'm styling for mobile and desktop. My priority is mobile ! When you
say your styles need to be in the right order, you mean put the Mobile
MQ above the desktop MQ, correct ?
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 10:47 PM
Just changing your MQs isn't enough. Your styles need to be in the
right order. Styles for mobile first. Then the next styles for wider
screens. You styles are still desktop first.
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 10:24 PM
crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>
I see, you prefer min-width ?
Christopher
Yes. Mobile first with min-width. Recommended by many, and speaking
from experience it's much easier and less code than the other way around.
Using min-width MQs and percentage widths for structure elements
allows you to accommodate many more devices "automatically". Devices
of different sizes are accounted for because of the range of widths
between MQs.
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 9:46 PM
No.
As I stated in my reply. I'm using MIN-WIDTH media queries. They are
"active" when the viewport is AT LEAST as wide as the dimension stated
and remain in effect until - in this case the bg color - is changed
inside another MQ. Look at my source.
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 20, 2014 9:43 PM
Tom, as I shrink the viewport before I reach 320px the box is red,
shouldn't it wait until the viewport is at 320px ?
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 9:39 PM
Look at this:
http://tomliv.com/css-d/mq/
I am using min-width. So the viewport needs to be *AT LEAST* as wide
as the dimension used. Can be wider, up to the next breakpoint (MQ).
Think mobile first...
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
