4 min read

11 hours ago

Listen

In the world of web development, creating responsive designs is crucial to ensure that websites look great and function well on a variety of devices, from large desktop screens to small mobile phones. One of the most powerful tools in CSS for creating responsive layouts is the Media Query.

In this blog, we will explore the concept of media queries, how to use them for different device sizes like desktop, laptop, tablet, and mobile, and introduce the important role of the meta tag in making responsive websites. Additionally, we will go through an example of creating a column box section that adapts responsively across different devices.

1. What Are Media Queries?

Media Queries is a CSS feature that allows you to apply styles based on specific conditions, such as the screen size, device type, or even the orientation of the device (landscape or portrait). By using media queries, you can create styles that change dynamically depending on the user’s device, ensuring your design is responsive and adaptable.

Basic Syntax:

@media (condition) {  /* CSS styles go here */}

Example:

@media (max-width: 768px) {  /* Styles for screens with a width of 768px or smaller */  body {    background-color: lightblue;  }}

In this example, when the screen size is 768px or smaller (typical for tablets or mobile devices), the background color of the body will change to light blue.

2. Using Media Queries for Different Device Sizes

When designing responsive layouts, we need to consider various device sizes such as desktops, laptops, tablets, and mobiles. Media queries help you apply different styles based on these device breakpoints.

Here are common device size breakpoints typically used in responsive design:

Media Queries for Different Devices:

For Desktops (XXL):

@media (min-width: 1200px) {  /* Styles for large desktop screens */  .container {    width: 1140px;  }}

For Laptops and Small Desktops (XL):

@media (min-width: 992px) and (max-width: 1199px) {  /* Styles for smaller desktops or laptops */  .container {    width: 960px;  }}

For Tablets (LG):

@media (min-width: 768px) and (max-width: 991px) {  /* Styles for tablets */  .container {    width: 720px;  }}

For Mobile Landscape (MD):

@media (min-width: 576px) and (max-width: 767px) {  /* Styles for mobile landscape */  .container {    width: 540px;  }}

For Mobile Portrait (XS):

@media (max-width: 575px) {  /* Styles for mobile portrait */  .container {    width: 100%;  }}

By defining these breakpoints, you ensure that your website’s layout adapts smoothly across a wide range of devices, providing an optimized experience for every user.

3. Meta Tag for Responsive Design

To ensure proper scaling and display on mobile devices, you need to include a meta tag in the head of your HTML document. This tag informs the browser to adjust the layout based on the device’s screen size and ensures that the design behaves as expected when viewed on mobile devices.

Meta Tag Syntax:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explanation:

width=device-width: Ensures that the website matches the width of the device screen.
initial-scale=1.0: Ensures that the page’s initial zoom level is set to 1, meaning the website is not zoomed in or out when loaded.

Without this tag, your website may appear zoomed out or inappropriately sized on mobile devices, even if you have used media queries.

4. Example: Creating a Responsive Column Box Section

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>Responsive Layout with Flexbox</title>    <style>           * {            margin: 0;            padding: 0;            box-sizing: border-box;        }        body {            font-family: Arial, sans-serif;        }        .box-section {            display: flex;            flex-wrap: wrap;            justify-content: space-between;            padding: 20px;        }        .box {            flex-basis: 30%;            text-align: center;            padding: 20px;            background-color: #f4f4f4;            border: 1px solid #ddd;            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);            margin-bottom: 20px;        }        /* Media query for small screens (mobile phones) */        @media (max-width: 576px) {            .box {                flex-basis: 100%;                           }        }        /* Media query for medium screens (tablets, smaller laptops) */        @media (min-width: 577px) and (max-width: 991px) {            .box {                flex-basis: 48%;                            }            .box:nth-child(3) {                flex-basis: 100%;                           }        }    </style></head><body>    <div class="box-section">        <div class="box">            <img src="https://picsum.photos/id/230/200/300" alt="Icon" width="100%" height="150">            <h3>Title 1</h3>            <p>Some content here.</p>        </div>        <div class="box">            <img src="https://picsum.photos/id/231/200/300" alt="Icon" width="100%" height="150">            <h3>Title 2</h3>            <p>Some content here.</p>        </div>        <div class="box">            <img src="https://picsum.photos/id/232/200/300" alt="Icon" width="100%" height="150">            <h3>Title 3</h3>            <p>Some content here.</p>        </div>    </div></body></html>

#html

Frontender`s Spectre

Introduction to Media Queries in CSS: Building Responsive Designs