Created
February 24, 2012 15:03
-
-
Save GaryJones/1901483 to your computer and use it in GitHub Desktop.
Media query sizes defined with meta tag.
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
| <head> | |
| <meta name="media" content="large=screen and (min-device-width:1024px)" /> | |
| <meta name="media" content="medium=screen and (min-device-width:640px and max-device-width:320px)" /> | |
| <meta name="media" content="tiny=screen and (max-device-width:320px)" /> | |
| <meta name="media" content="foo=print" /> | |
| </head> | |
| <body> | |
| <!-- whatever the decided content markup is, but referencing the meta values --> | |
| <picture alt="..."> | |
| <source src="foobar-150x150.png" media="tiny" /> | |
| <source src="foobar-300x300.png" media="medium" /> | |
| <source src="foobar-600x600.png" media="large" /> | |
| <source src="foobar-black-white.png" media="foo" /> | |
| <img src="foobar.png" /> | |
| </picture> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See http://www.w3.org/community/respimg/2012/02/23/picture-for-existing-browsers/#comment-114 for the explanation.
If multiple meta tags with the same name aren't allowed, then perhaps move the name of the breakpoint into the name attribute, with a
media-prefix e.g.: