Created
May 1, 2012 21:10
-
-
Save bencallahan/2571427 to your computer and use it in GitHub Desktop.
Responsive Retrofitting CSS Link Options
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- always include the small layout --> | |
| <!-- base-small.css has smallest styles at top and medium styles behind a media query at bottom --> | |
| <link rel="stylesheet" type="text/css" href="css/base-small.css"> | |
| <!-- if the viewport width is >= 980 px, serve the original styles --> | |
| <link media="min-width: 980px" rel="stylesheet" type="text/css" href="css/base-original.css"> | |
| <!-- for older IE, except IEMobile, serve the original styles --> | |
| <!--[if (lte IE 8)&(!IEMobile)]> | |
| <link rel="stylesheet" type="text/css" href="css/base-original.css"> | |
| <![endif]--> | |
| </head> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- this is actually a SCSS file and would always be linked in the head --> | |
| <!-- if JavaScript is disabled OR media queries aren't supported --> | |
| .no-mediaquery { | |
| @import "original"; | |
| } | |
| <!-- if viewport width is <= 500 px, serve the smallest styles --> | |
| @media (max-width: 500px) { | |
| @import "small"; | |
| } | |
| <!-- if viewport width is <= 979 px, serve the smallest styles --> | |
| @media (max-width: 979px) { | |
| @import "medium"; | |
| } | |
| <!-- if viewport width is >= 980 px, serve the original styles --> | |
| @media (min-width: 980px) { | |
| @import "original"; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- these "-js.css" files are SCSS aggregates wrapped in a modernizer ".js" class --> | |
| <link media="min-width: 980px" rel="stylesheet" type="text/css" href="css/base-original-js.css"> | |
| <link media="max-width: 500px" rel="stylesheet" type="text/css" href="css/base-small-js.css"> | |
| <link media="(min-width: 501px) and (max-width: 979px)" rel="stylesheet" type="text/css" href="css/base-small+medium-js.css"> | |
| <noscript> | |
| <link rel="stylesheet" type="text/css" href="css/base-small.css"> | |
| </noscript> | |
| <script> | |
| /* pseudo-code */ | |
| if ((no media query support) and | |
| (document viewport width <= 500px)) { load "css/base-small-js.css" } | |
| if ((no media query support and) | |
| (document viewport width >= 501px) and | |
| (document viewport width <= 979px)) { load "css/base-small+medium-js.css" } | |
| if ((no media query support) and | |
| (document viewport width >= 980px)) { load "css/base-original-js.css" } | |
| </script> | |
| </head> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment