Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Media Queries</title>
<style>
body {
background-color: lightblue;
color: darkblue;
}
@media screen and (max-width: 900px) and (min-width: 600px) {
body {
background-color: lightcoral;
color: black;
}
}
</style>
</head>
<body>
<!--
Media queries can be used to check many things, such as:
- width & height of the viewport
- width & height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
-->
<h1>Demo: Media Queries</h1>
<h3>Adjust the viewport of browser window and observer the change in background and text color.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum eius repellendus adipisci. Aut, eius pariatur? Amet nulla hic incidunt? Tempora corporis impedit officia ipsam asperiores, magnam vel. Sequi culpa pariatur architecto natus veniam! Ut eligendi facere deserunt nobis non, repellendus distinctio at qui unde doloremque. Nulla excepturi maxime enim ipsam qui rerum eligendi officiis quam suscipit necessitatibus iure odio atque in fugit nobis voluptates magni, quibusdam nesciunt veritatis est temporibus quo itaque aliquam. Eaque, maiores dolor perferendis officia veritatis nam magni fugit explicabo, corporis porro culpa recusandae ea quis iure sint vero sit? Eius eligendi ducimus laborum optio delectus. Nihil iusto consequatur, harum ea laborum inventore necessitatibus temporibus neque doloribus consectetur dolore praesentium velit fugit blanditiis optio, suscipit iste incidunt! Nisi quo non accusamus voluptatem corrupti, illum dolore facere dolores debitis inventore molestias tempora obcaecati id animi pariatur. Aspernatur cupiditate, culpa repudiandae ex voluptas dignissimos? Expedita consequuntur, labore facere rem quasi natus minus, praesentium corporis odit consequatur aut tempora? Nulla tempora possimus non et quibusdam omnis ullam officiis, laudantium deleniti quos, rem placeat pariatur doloremque est minima eligendi. Consequuntur repellat eligendi enim ad accusamus aliquid fugit, veritatis rem a, aperiam ex nesciunt eum officiis est! Numquam totam magnam cumque tempora perspiciatis maxime doloribus atque beatae quos eos ab, nostrum quas aut adipisci omnis harum aliquam. Odio, eos? Aut quasi cupiditate voluptatum quod, accusamus rerum sapiente hic molestias. Natus autem, eligendi, facere debitis aliquam dicta deleniti fugit blanditiis vitae corporis dolorem! Temporibus sit ducimus nostrum animi. Quia, error, voluptatem voluptates totam laboriosam ipsum, excepturi numquam repellendus nostrum odio amet sequi beatae. Adipisci, sunt. Dignissimos libero quasi esse necessitatibus? Labore ut alias odio sapiente, neque veniam natus? Alias, magni? Consectetur vel, fuga neque aliquid provident eos. Facilis at eveniet corrupti ratione natus error, itaque, laudantium architecto iusto possimus iure reiciendis eos alias!</p>
</body>
</html>