In this first video, you will learn about using the link tag in HTML to import style sheets when a certain condition is true about the media in question.
So, following from their examples, the below HTML code for a linked style sheet media query would only load that style sheet when the screens width was larger than 500px.
<link rel="stylesheet" media="screen and (min-width: 600px)" href="style-min-600.css">
Likewise, the following would only load the style-499-max.css stylesheet when the screen size is less than or equal to 499px.
<link rel="stylesheet" media="screen and (max-width: 499px)" href="style-max-499.css">
The most common media queries are
min-width: Which is executed with the pixel amount is greater than the set number.
max-width: Which is executed when the browser is less than the number of pixels specified.
In the following example, there are three style sheets;
main.css
sans-serif499-max.css
600-max.css
Notice how they allow the examples background color to change, based on the screen size of the iframe. You should also open this example in a separate tab to explore it in your own browser directly.
<head>
<meta charset="utf-8">
<title>Media Query Example 1</title>
<!-- Main CSS Style Sheet -->
<link rel="stylesheet" href="./css/main.css">
<!-- CSS Style Sheets loaded via media queries -->
<link rel="stylesheet" media="(min-width:600px)" href="./css/600-min.css">
<link rel="stylesheet" media="(max-width:499px)" href="./css/499-max.css">
</head>
<body>
<h2>Media Query Example.</h2>
<h3>Please resize your browser. You Should see the background color change.</h3>
<h3>You might also open the example in a seperate tab, via the link below.</h3>
</body>
body {
font-family: sans-serif;
background-color: #fff;
}
body {
background-color: #ff0000;
}
body {
background-color: #0000ff;
}
| [Code Download] | [View on GitHub] | [Live Example] |