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:
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:
