EN
CSS - responsive styles for desktop and mobile (desktop first approach)
4 points
In this short article, we want to show how to create responsive desktop and mobile styles for a simple page layout using @media queries in CSS.
The below example uses a desktop-first approach - it means at first we have created styles for desktop and later some of them were overwritten using @media block to achieve mobile styles.
Note: run the below example and change the web browser window size to smaller - you will see the effect.
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
/* Desktop first approach */7
8
/* Default styles for Desktop */9
10
div.header {11
background: #adadff;12
height: 50px;13
}14
15
div.container {16
height: 200px;17
display: flex;18
}19
20
div.menu {21
background: #ff6b6b;22
flex: 0 0 200px;23
}24
25
div.content {26
background: orange;27
flex: auto;28
}29
30
div.footer {31
background: #7dd96d;32
height: 50px;33
}34
35
/* Mobile styles for screen width <= 550px */36
37
@media (max-width: 550px)38
{39
/* below styles overwrite desktop styles */40
41
div.container {42
height: auto;43
display: block;44
}45
46
div.menu {47
flex: none;48
height: 50px;49
}50
51
div.content {52
flex: none;53
height: 300px;54
}55
}56
57
</style>58
</head>59
<body>60
<div class="header">Header ...</div>61
<div class="container">62
<div class="menu">Menu ...</div>63
<div class="content">Content ...</div>64
</div>65
<div class="footer">Footer ...</div>66
</body>67
</html>
