Prev Next

CSS MQ Examples

Media Query (MQ) examples demonstrate practical applications of media queries to create responsive designs. These examples include layouts, typography, and visibility adjustments based on screen size and device capabilities.

Key Topics

Responsive Layout

Create a responsive layout that adjusts the number of columns based on the screen size.

<style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        @media (min-width: 600px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 900px) {
            .grid-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
</style>
<div class="grid-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

Explanation: The layout adjusts to one column on small screens, two columns on medium screens, and three columns on large screens.

Font Resizing

Adjust font sizes dynamically based on the screen width for improved readability.

<style>
        body {
            font-size: 16px;
        }
        @media (min-width: 600px) {
            body {
                font-size: 18px;
            }
        }
        @media (min-width: 900px) {
            body {
                font-size: 20px;
            }
        }
</style>
<div>Resize the browser to see font size adjustments.</div>

Explanation: Font size increases progressively as the screen width expands, enhancing readability on larger devices.

Visibility Control

Show or hide elements based on the screen size using media queries.

<style>
        .mobile-only {
            display: none;
        }
        @media (max-width: 600px) {
            .mobile-only {
                display: block;
                background-color: #FF5733;
                color: white;
                padding: 10px;
            }
        }
</style>
<div class="mobile-only">Visible only on mobile devices.</div>

Explanation: The element is visible only on devices with a screen width of 600px or smaller, enhancing usability for mobile users.

Device-Specific Styles

Apply styles tailored to specific devices, such as desktop, tablet, or mobile.

<style>
        @media (min-width: 1200px) {
            .desktop {
                font-size: 24px;
                color: #007BFF;
            }
        }
        @media (min-width: 768px) and (max-width: 1199px) {
            .tablet {
                font-size: 20px;
                color: #28A745;
            }
        }
        @media (max-width: 767px) {
            .mobile {
                font-size: 16px;
                color: #FF5733;
            }
        }
</style>
<div class="desktop">Desktop View</div>
<div class="tablet">Tablet View</div>
<div class="mobile">Mobile View</div>

Explanation: Each class is styled specifically for a device type, ensuring optimized design for each screen size.

Key Takeaways

  • Responsive Layouts: Use media queries to create layouts that adjust to different screen sizes.
  • Typography: Dynamically resize fonts for optimal readability on various devices.
  • Visibility: Control element visibility based on device screen size.
  • Device Targeting: Apply specific styles for desktops, tablets, and mobile devices.
  • Enhanced UX: Media queries ensure a seamless user experience across multiple devices.
Prev Next