The Double A Method


/ Published in: CSS
Save to your folder(s)

A toolkit method for responsive development


Copy this code and paste it in your HTML
  1. /*
  2. ==================================================
  3.   The Double A Method
  4. ==================================================
  5. */
  6.  
  7. * { box-sizing: border-box; }
  8.  
  9. body {
  10. border-left-color: red;
  11. border-left-style: solid;
  12. border-left-width: 8px;
  13. }
  14.  
  15. @media only screen and (min-width: 30em) {
  16. body { border-left-color: orange; }
  17. }
  18.  
  19. @media only screen and (min-width: 40em) {
  20. body { border-left-color: green; }
  21. }
  22.  
  23. @media only screen and (min-width: 50em) {
  24. body { border-left-color: blue; }
  25. }
  26.  
  27. @media only screen and (min-width: 60em) {
  28. body { border-left-color: purple; }
  29. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.