Skip to content

Instantly share code, notes, and snippets.

@anselmh

anselmh/responsive-attr-html5.html

Last active September 26, 2015 21:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anselmh/1158855 to your computer and use it in GitHub Desktop.
Save anselmh/1158855 to your computer and use it in GitHub Desktop.
Download ZIP
responsive attribute for HTML/CSS3
Raw
responsive-attr-html5.html
<!-- backwards compatible solution -->
<!-- the browser should read media-query and then download the right file for the actual screen size -->
<img media-xs="(min-width:640px)" media-xs-src="http://cdn.url.com/img/myimage_xs.jpg" media-m="(max-width:1024px)" media-m-src="http://cdn.url.com/img/myimage_m.jpg" media-xl="(min-width:1025px)" media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg" src="http://cdn.url.com/img/myimage_xs.jpg" />
<img media-xs="(max-width:640px)"
media-xs-src="http://cdn.url.com/img/myimage_xs.jpg"
media-m="(max-width:1024px)"
media-m-src="http://cdn.url.com/img/myimage_m.jpg"
media-xl="(min-width:1025px)"
media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg"
src="http://cdn.url.com/img/myimage_xs.jpg" />
@anselmh
Copy link
Author

anselmh commented Aug 21, 2011

changed code to a better and backwards compatible solution.

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