Welcome to an exciting chapter! We know that HTML, CSS, and JavaScript are the key languages that bring web pages to life. But devices like smartphones, tablets, laptops, or smartwatches which are used to view our pages come in various sizes. The solution? Responsive Web Design. It ensures that web pages detect the viewer's screen size and orientation and adjusts the layout accordingly. It's similar to words in a book reflowing to fit pages of different sizes. Now, let's delve deeper!
To make your site responsive, you should embrace CSS Media Queries. These are instrumental in Responsive Web Design. Media queries implement certain CSS rules when specific conditions are fulfilled. For example, the following is a simple media query that applies a rule when the browser window is less than 600 pixels wide:
CSS1@media screen and (max-width: 600px) { 2 body { 3 background-color: lightblue; 4 /* If the above condition is met, the background color of the page changes to lightblue */ 5 } 6}
In the above segment, screen is the media type and (max-width: 600px) is the media feature. It changes the body's background color to light blue when the viewport is 600 pixels wide or less.
Media queries modify layouts based on screen size. For example, a webpage layout on a large screen (like a desktop) would differ from that on a smaller screen (like a smartphone). Here's an example:
HTML, XML1<html> 2 <head> 3 <link rel="stylesheet" type="text/css" href="styles.css"> 4 </head> 5 <body> 6 7 <div class="column">Column 1</div> 8 <div class="column">Column 2</div> 9 <div class="column">Column 3</div> 10 11 </body> 12</html>
And the corresponding CSS in styles.css:
CSS1/* For larger screens (width equal 600px or more) */ 2@media screen and (min-width: 600px) { 3 .column { 4 width: 30%; /* Each column size is 30% of the total width of its containing element */ 5 float: left; /* Float is used to push the columns to the left side of the containing element */ 6 margin-left: 1%; /* Creates a 1% space at the left side of the column */ 7 margin-right: 1%; /* Creates a 1% space at the right side of the column */ 8 margin-top: 2%; /* Creates a 2% space at the top of the column */ 9 margin-bottom: 2%; /* Creates a 2% space below the column */ 10 } 11} 12/* For smaller screens (width less than 600px) */ 13@media screen and (max-width: 600px) { 14 .column { 15 width: 100%; /* Each column size is 100% of the total width of its containing element */ 16 float: none; /* Columns are not floated and hence render vertically */ 17 margin-top: 2%; /* Creates a 2% space at the top of the column */ 18 margin-bottom: 2%; /* Creates a 2% space below the column */ 19 } 20}
Note that when we give a value as a percentage, such as margin-left: 1%;, it means that the left margin is set to 1% of the total width of the parent element. For example, if the parent element has a width of 800px, a margin-left: 1%; on the child element would be equivalent to 8px.
We can initially structure for big screens and then adapt it for smaller screens. However, in web development, a widely recognized approach is the Mobile-First Design. It includes designing for small screens first and then scaling up for larger screens.
Here's an example to illustrate:
CSS1.column { 2 width: 100%; /* Default CSS rules for the smallest screens, e.g., mobile phones */ 3} 4@media screen and (min-width: 600px) { 5 .column { 6 width: 30%; 7 float: left; 8 } 9}
That concludes our lesson! Today, you've unlocked a key aspect of web development! You've learned about:
- Responsive website design — what it involves and why it is significant.
- Media queries — why we use them and their syntax.
- Creating Responsive layouts using Media Queries — how they enhance viewer experience.
- The Mobile-First design approach — how it ensures a better responsive design.
It's now time to practice. In the upcoming exercises, you'll build a responsive webpage layout that should adapt to different screen sizes. Enhance your web-development skills and explore more in the following exercises! Good luck!