Skip to content

Instantly share code, notes, and snippets.

@bjankord

bjankord/dry-picture-element-media-queries

Created February 23, 2012 14:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bjankord/1893129 to your computer and use it in GitHub Desktop.
Save bjankord/1893129 to your computer and use it in GitHub Desktop.
Download ZIP
DRY Picture element media queries
Raw
dry-picture-element-media-queries
<?php
// Define picture element media query values here
$m_mqs = 'min-width:321px';
$l_mqs = 'min-width:641px';
$xl_mqs = 'min-width:1281px';
?>
<picture alt="Alt tag describing the image represented">
<source src="photo-s.jpg"/>
<source src="photo-m.jpg" media="<?php ehco $m_mqs; ?>"/>
<source src="photo-l.jpg" media="<?php ehco $l_mqs; ?>"/>
<source src="photo-xl.jpg" media="<?php ehco $xl_mqs; ?>" />
<img src="photo-s.jpg" />
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment