##I'm Mobile Friendly##
20 min
Let's go back to last week's lab that we developed on Friday. Using media queries, make the page more mobile friendly by removing fixed widths, and applying appropriate font styling depending on the viewport size.
| Attribute | Example |
|---|---|
| min-width | min-width: 640px |
| max-width | max-width: 640px |
| min-height | min-height: 1000px |
| max-height | max-height: 1000px |
| orientation | (orientation: portrait), (orientation: landscape) |
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: blue;
}
}
</style>