Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
DRY Picture element media queries
// 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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment