Understanding Media Queries in CSS

Media queries are a fundamental feature in CSS that allows developers to apply styles based on specific conditions, such as the device's screen size, orientation, or resolution. This capability is imporant for creating responsive web designs that adapt to different devices, ensuring an optimal viewing experience for users across desktops, tablets, and smartphones.

 

When to Use Media Queries?

Media queries are typically used in the following scenarios.

 

1.   Responsive Design: To create layouts that adjust based on the screen size, ensuring usability and readability on various devices.

2.   Adaptation to Different Devices: To target specific devices, such as high-resolution screens (e.g., Retina displays) or print styles.

3.   Changing Layouts: To modify styles for different orientations, such as switching from a horizontal layout on landscape mode to a vertical layout in portrait mode.

 

Example 1: Media Query for Devices with a Maximum Width of 768px

/* Styles for devices with a maximum width of 768px (tablets and smaller) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        flex-direction: column;
    }
}

@media (max-width: 768px): This media query targets devices with a screen width of 768 pixels or smaller. This typically includes tablets and mobile devices. The styles within this block will apply only when the viewport meets this condition.

 

body { font-size: 16px; }: The font size of the text within the body is set to 16 pixels for smaller devices. This size is generally considered readable on smaller screens.

 

flex-direction: column;: If the body is using a flexbox layout, this property changes the layout direction to a vertical column. This means that the flex items (children of the body) will stack vertically rather than horizontally, which can enhance readability on smaller screens where horizontal space is limited.

 

Example 2: Media Query for Devices with a Minimum Width of 769px

/* Styles for devices with a minimum width of 769px (desktops) */
@media (min-width: 769px) {
    body {
        font-size: 20px;
    }
}

@media (min-width: 769px): This media query targets devices with a screen width of 769 pixels or wider. This typically includes desktops and larger screens. The styles within this block will apply only when the viewport meets this condition.

 

body { font-size: 20px; }: The font size of the text within the body is set to 20 pixels for larger devices. A larger font size is often more appropriate for desktops, where users are typically sitting farther away from the screen and have more space available for content.

 

These media queries effectively create a responsive design by:

 

·      Adjusting the font size based on the device size, improving readability.

·      Changing the flexbox layout direction for smaller devices to ensure that the content is displayed in a user-friendly vertical stack, which is better suited for narrow screens.

 

Find the below application.

 

hello-world.css

/* Base styles for all devices */
body {
    font-family: Arial, sans-serif;
    background-color: white;
    color: black;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.box {
    display: flex;                /* Enable flexbox on the item */
    justify-content: center;      /* Center horizontally */
    align-items: center;          /* Center vertically */
    width: 300px;                 /* Fixed width of the item */
    height: 200px;                /* Fixed height of the item */
    background-color: #4CAF50;    /* Green background for the item */
    color: white;                 /* Text color */
    font-size: 24px;              /* Font size */
    border-radius: 10px;          /* Rounded corners */
    margin: 20px;                 /* Margin around the item */
}

/* Styles for devices with a maximum width of 768px (tablets and smaller) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        flex-direction: column;
    }
}

/* Styles for devices with a minimum width of 769px (desktops) */
@media (min-width: 769px) {
    body {
        font-size: 20px;
    }
}

 

hello-world.html

<!Doctype html>
<html>
    <head>
        <title>Media Queries (Hello World)</title>
       <link rel="stylesheet" href="./hello-world.css">
    </head>

    <body>
        <div class="box">Box1</div>
        <div class="box">Box2</div>
        <div class="box">Box3</div>
        <div class="box">Box4</div>
    </body>

</html>

Open hello-world.html page in browser, you will see below screen.

 

Reduce the browser window width, you will see that the layout is changed to columnar.

Previous                                                    Next                                                    Home