CSS Media Queries

Welcome to another golden gem from mkcoder.com, where learning web design feels like a walk in the garden, not a hike up the Himalayas! Today, we’re diving into the magical world of CSS Media Queries—but with a twist! This isn’t just about screen sizes, this is about control, creativity, and clean design.

What Are Media Queries in Simple Words?

Think of it this way: your site should flow like water into whatever size vase it can fit--whether it's a mobile phone, tablet, laptop, or giant desktop monitor. Media queries send the browser the message to:

“Hey! If you're on a small screen, do this. If you're on a large screen, do that!”

They help make your website responsive—which means it adjusts automatically and looks good on any device.

Basic Syntax of Media Queries

Let’s take a simple example:

@media (max-width: 768px) {
                      body {
                        background-color: lightblue;
                      }
                    }

Example in action (resize your browser to see the background change):

What this means:

• If the device width is 768px or less, the body will get a light blue background.

Why Use Advanced Media Queries?

Great question, Bhai!

Basic media queries are just the start. But with advanced techniques, you can:

• Target screen orientation (portrait vs landscape)
• Apply styles based on device type
• Handle high-resolution displays (like Retina screens)
• Make layouts flexible and interactive

Let’s see how!

Media Queries by Orientation

You can change styles based on how the screen is held—portrait (vertical) or landscape (horizontal).

@media (orientation: landscape) {
                      .container {
                        flex-direction: row;
                      }
                    }

This is helpful when designing mobile games or image galleries.

Media Queries by Device Type

You can also target specific device types:

@media screen and (max-width: 480px) {
                      body {
                        font-size: 14px;
                      }
                    }
                    
                    @media print {
                      body {
                        color: black;
                        background: none;
                      }
                    }

Useful when making sure your site prints nicely or looks good on smartphones.

High Resolution Media Queries (Retina Ready!)

New-age screens have high pixel density (like iPhones). To make your images & text look crisp:

@media
                      only screen and (-webkit-min-device-pixel-ratio: 2),
                      only screen and (min-resolution: 192dpi) {
                        .logo {
                          background-image: url('logo@2x.png');
                          background-size: contain;
                        }
                    }

Example in action (may require a high-DPI screen to see the 2x image):

This tells browsers to use high-res images when available.

Combining Media Features

Let’s say you want to target tablets in portrait mode with a light theme:

@media (max-width: 1024px) and (orientation: portrait) and (prefers-color-scheme: light) {
                      body {
                        background: #fdfdfd;
                        color: #222;
                      }
                    }

Advanced, right? But also easy!

Responsive Grid Example with Media Queries

Let’s make a responsive grid layout:

HTML (relevant part)

<div class="grid-container">
                      <div class="item">1</div>
                      <div class="item">2</div>
                      <div class="item">3</div>
                    </div>

CSS (relevant part)

.grid-container {
                      display: grid;
                      grid-template-columns: repeat(3, 1fr);
                      gap: 10px;
                    }
                    
                    @media (max-width: 768px) {
                      .grid-container {
                        grid-template-columns: repeat(2, 1fr);
                      }
                    }
                    
                    @media (max-width: 480px) {
                      .grid-container {
                        grid-template-columns: 1fr;
                      }
                    }

Example in action (resize your browser to see columns change):

This changes layout based on screen size: 3 columns → 2 columns → 1 column.

Real Life Tips for Using Media Queries

• Start with Mobile First: Use smaller screen styles as default, then add styles for bigger screens.
• Keep Breakpoints Logical: Common widths are 320px, 480px, 768px, 1024px, 1280px.
• Test on Real Devices: Emulators are good, but always test on real phones and desktops.
• Avoid too many Media Queries: your CSS will get complicated, and no one wants that to maintain longterm.
• The smaller the device, use REM or % units instead of px units to scale better.

Bonus Tip: Use mkcoder.com as Your CSS Playground

You could write and test these CSS media queries in your own html, or a code editor such as VS Code, or CodePen, or even better, check out articles, resources, and tools at mkcoder.com to have fun learning while you get better!

Conclusion: Media Queries Make You a Web Ninja

Bhai, mastering CSS Media Queries will not only make your designs go to good to epic proportions, it allows your site to move and flow with (or dance to) the size of every screen (big, medium or small).

So start experimenting, break your layouts, fix them again, and keep building.

"A coder who respects every device, earns the love of every user."

Keep growing, and for more beginner-friendly guides like this one, visit 👉 mkcoder.com