Resize the viewport to see the example.
CSS
/* Set the background color for the mobile version -- mobile-first design */
body {
background-color: yellow;
font-size: 2rem;
}
/* Create a media query to change the background color to white when the viewport exceeds 800px. Note there are two sets of brackets here */
@media screen and (min-width: 800px) {
body {background-color: white;
font-size: 1.5rem;
}
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit ligula at metus condimentum, quis euismod nibh tempus. Mauris sem nulla, pharetra sit amet condimentum sed, pretium scelerisque mi. Etiam vel vestibulum ex. Morbi porta suscipit leo vitae fringilla. Vestibulum ac malesuada justo. Maecenas eget tristique augue, eget mattis lorem. Nunc at ultricies libero, non rutrum dolor. Mauris efficitur orci sit amet tellus lobortis iaculis.
Nulla facilisi. Cras posuere in ipsum in elementum. Proin id leo congue, gravida lorem vel, malesuada eros. Integer aliquam, ligula et lobortis iaculis, mi arcu pretium massa, at tempus nibh nisi sit amet eros. Nunc at porta arcu. Proin laoreet sapien a magna posuere vulputate. Etiam et arcu vel diam aliquam iaculis. Maecenas sagittis, dolor a cursus euismod, metus mi ultricies neque, nec efficitur odio lorem quis est. Curabitur congue condimentum leo, et auctor magna venenatis sit amet. Duis non porta leo. Donec faucibus rutrum dictum. Sed tristique suscipit iaculis. Phasellus ornare vulputate euismod.
Sed ut justo enim. Nullam bibendum, justo ut faucibus fringilla, nulla nunc consequat augue, in faucibus tortor erat nec mi. Praesent ut sem leo. Aenean placerat cursus lectus. Vivamus nisl justo, efficitur et sem vitae, aliquet semper nisi. Proin sollicitudin tincidunt est, vitae scelerisque augue porttitor vel. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Phasellus convallis lacus eu nisl aliquet sodales. Nam ornare vel dolor nec molestie. Phasellus nisl arcu, tincidunt eget euismod non, tempor ut diam. Cras tincidunt diam ac sem malesuada posuere. Mauris ullamcorper massa ut nunc faucibus, ac vestibulum est elementum. Nam interdum, metus vel vulputate elementum, lorem sem faucibus velit, sit amet interdum tellus purus eu ipsum. Mauris non nisi sed lectus molestie suscipit in nec velit. Vestibulum ultricies felis dolor, vel fermentum ligula consectetur eget. Aenean et odio purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tempus purus sed tellus dapibus, non dignissim est placerat. Nulla pellentesque eros vitae lacus efficitur, sit amet feugiat nulla ornare. Maecenas ligula urna, vulputate in odio sed, porttitor congue sapien.
Nulla fringilla, quam sit amet blandit pellentesque, elit leo pellentesque quam, vitae fermentum sapien tellus quis sem. Vestibulum eros purus, dictum a justo vitae, fermentum varius nibh. Nunc ac dui at ipsum efficitur cursus in sit amet sem. Phasellus arcu tortor, dignissim sit amet urna a, lobortis sodales ante. Nulla sed ipsum gravida tortor facilisis accumsan et a mauris. Sed leo ex, commodo id porta et, cursus eget augue. Nullam non nisi vulputate ex vehicula condimentum. Fusce non vulputate nunc. Integer scelerisque lobortis fermentum. Etiam eu eleifend metus, eu mollis nisi. In venenatis ipsum at mauris ullamcorper mollis. Proin iaculis egestas lacinia. Nullam eu mauris neque. Pellentesque quis consectetur lorem, vitae placerat neque. Proin rhoncus volutpat ultrices. Pellentesque et congue nisi.
