CSS Media Queries with EMs

by Travis

HTML

<div id="content">
    <h1>Article Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a volutpat ipsum. Cras sit amet tellus ut tortor venenatis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ac posuere erat. Donec adipiscing, nibh in laoreet ornare, quam tellus tristique nunc, sed porttitor lectus est sed purus. Integer vel pellentesque orci. Proin consectetur urna erat, quis ultrices nibh gravida accumsan. Sed sit amet convallis risus. Nulla consequat magna sapien. Praesent ultrices euismod scelerisque. Nam auctor libero arcu, ac lobortis arcu ullamcorper vitae. Curabitur facilisis nec sem nec mollis. Sed eleifend dapibus nulla, ac congue risus facilisis vel. Fusce eget ornare dui.</p>

<p>Morbi vitae elementum massa. Vivamus nec elit id sem pulvinar consequat vel id odio. Nunc sed justo mattis, mattis arcu id, rhoncus mauris. Vestibulum ac dolor pellentesque, laoreet lectus sed, viverra tellus. Phasellus velit quam, bibendum at mollis cursus, suscipit sed libero. Duis rhoncus semper dui, ut volutpat mi vulputate id. Ut interdum nisi urna, blandit sollicitudin elit aliquam quis. Mauris rutrum, mauris non porttitor facilisis, sapien enim condimentum nulla, vitae ultrices nisl nisi id lacus. Maecenas consequat mauris vel nibh condimentum blandit. Donec dapibus vitae enim id ultrices. Vivamus suscipit pharetra leo, eu pretium mi lacinia ut. Fusce tincidunt, lectus ut pretium bibendum, ante neque sagittis mi, at imperdiet mauris nunc ac dolor.</p>
</div>

CSS

body {font:400 16px Sans-Serif; padding:3em;}
h1 {font-size:2em;}
p {font-size:1em;}

@media screen and (max-width:40em) {
    #content {font-size:2em;}
}