Finally, we come to the most important topic in responsive design, that is how to create a webpage layout that adapts to the viewport size.
In this lesson, we will create responsive page layouts that adapt to the viewport sizes using media queries, flexbox, grids, and other technologies.
For demonstration purposes, we are going to build a responsive page layout with a navigation bar, two sidebars (left and right), a main content section, as well as a footer, as shown in the diagram below.
The HTML code is rather simple:
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Flexbox Responsive Layout</title>
7
8 <link rel="stylesheet" href="style.css" />
9 </head>
10
11 <body>
12 <div class="container">
13 <div class="nav">Navbar</div>
14 <div class="side-primary">Primary sidebar</div>
15 <div class="content">
16 Main Content
17 <p>. . .</p>
18 </div>
19 <div class="side-secondary">Secondary sidebar</div>
20 <div class="footer">Footer</div>
21 </div>
22 </body>
23</html>Before getting started with the layout, you should set box-sizing to border-box like we discussed previously. * is a wildcard selector that selects all elements in the HTML document.
1* {
2 box-sizing: border-box;
3 padding: 0px;
4 margin: 0px;
5}We also added some decorative styles to make the webpage look better. You can create a different design if you want. These code will be omitted in future examples.
1div {
2 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
3 "Lucida Sans", Arial, sans-serif;
4 padding: 20px;
5 text-align: center;
6 font-size: x-large;
7}
8
9p {
10 text-align: left;
11 font-size: medium;
12 font-family: Georgia, "Times New Roman", Times, serif;
13}
14
15.nav {
16 background-color: lightblue;
17}
18
19.side-primary {
20 background-color: lightcoral;
21}
22
23.content {
24 background-color: lightgreen;
25}
26
27.side-secondary {
28 background-color: lightsalmon;
29}
30
31.footer {
32 background-color: lightseagreen;
33}