An abstract best practices question about responsive site design, one some what akin to asking where is left and where is right.
-
Which direction to you favour? In other words do you THINK “up to a a certain size” , “below a certain size” , “between a certain size”( tho personally I have found this one to end up rather convoluted )
-
How do you represent that in media query logic so as to have as few conflicts as possible?
Let me give you an example of what I usually do , maybe some can learn from it but I would love pointers as to how to improve, streamline and make “readable”.
Lets say you have selection of break points, feel free to substitute any values I am just indicating that there would be 6 states… one of which would be ‘X to infinty’.
- if the site is smaller than 361px ( or I guess you could also say up to 360px)
- from 361px to 480px
- from 481px to 640px
- from 641px to 800px
- from 801px to 960px
- greater than 960px
first things first. I have always worked with the idea that, in media queries:
- you represent smaller than with ‘max-width’ as in: @media screen and (max-width: 360px ){ …}
- and greater than with ‘min-width’
I also have to take the cascade into account. I suppose this is the part i sort of visualize but am struggling with. I try to order my rules in a specific direction , usually counter to the inequality. That is , if i am using less than rules, I arrange my queries with the smallest dimensions first. and vice versa. Thus employing the override/cascade.
eg.:
general rules {}
@media screen and (max-width: 360px ){ …}
@media screen and (min-width: 361px ){ …}
@media screen and (min-width: 481px ){ …} /* greater than 481 px, inherits/overrides 361 /
@media screen and (min-width: 641px ){ …}/ greater than 640 px, inherits/overrides 361,481 /
@media screen and (min-width: 801px ){ …}/ greater than 800 px, inherits/overrides 641,481,361, /
@media screen and (min-width: 961px ){ …}/ greater than 960 px, inherits/overrides 801, 641,481,361, */
this is because at a screen size of say 650px, (min-width: 361px ),(min-width: 481px ) AND (min-width: 641px ) would ALL be TRUE. So if all rules from the 481{} would be inherited , and I can override whatever I want changed in the 641 {}. TWO PET PEEVES:
- I need that 361 rule to account for the screen sizes >360<480. (not having a max-width query would leave 0-360 unstyled execpt for the general rules… I suppose that ‘mobile first’ thinking, but that also bugs me. So that break point requires TWO media quires… ugh!
- Because of that I often have to repeat stuff from the max-width.
the alternate approach:
is 100% mobile firs
general rules {}/for smallest width devices/
@media screen and (max-width: 800px ){ …}/* 800px and up /
@media screen and (max-width: 640px ){ …}/ 640px and up, inherits/overrides 800 */
@media screen and (max-width: 480px ){ …} /*480px and up, inherits/overrides 800 , 600 */
@media screen and (max-width: 360px ){ …}/*480px and up, inherits/overrides 800 , 600, 360 /
@media screen and (min-width: 960px ){ …}/ 960px and up, ALL previous rules must be overridden */
of course now the inheritance logic reversed and it almost gives you a head ache. And by the time you get to the min-width 960, you are mostly overriding rules rather than adding them ( this works fine if you didnt do much styling for the smaller screen sizes , but seems repetitive and makes it a pain to debug otherwise)
So what would be your break point strategy? What can I change it to make my code arrangement more intuitive/easier to grasp?
