Skip to content

Instantly share code, notes, and snippets.

@nathansmith

nathansmith/adaptive_layout_idea.html

Created April 6, 2011 05:13
Show Gist options
  • Save nathansmith/905177 to your computer and use it in GitHub Desktop.
Save nathansmith/905177 to your computer and use it in GitHub Desktop.
Download ZIP
Conditionally serve CSS to screen widths that can handle it. With a fallback for when JavaScript is disabled and/or not supported.
Raw
adaptive_layout_idea.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Adaptive Layout Idea
</title>
<link rel="stylesheet" href="basic_defaults.css" />
<noscript>
<link rel="stylesheet" href="fallback.css" />
</noscript>
<script src="small_file_to_determine_css_based_on_width.js"></script>
</head>
<body>
<p>
Hello. Don't look at me. Magic is up above!
</p>
<script src="js_library_of_choice.js"></script>
<script src="other_site_specific.js"></script>
</body>
</html>
@milesw
Copy link

milesw commented Apr 6, 2011

Ah, excellent. Looking forward to testing this out soon. Seems much more flexible than media queries. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment