public

DRY Picture element media queries

  • Download Gist
dry-picture-element-media-queries
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<?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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.