Introduction to CSS @media (Responsive Design)

April 4, 2024 1:49 am Published by

There are many different tools at your disposal to make your site look good on all screens. One of the primary methods is the @media CSS rule.

Simply put, using @media allows you to code different variables depending on specific situations—most commonly, screen size. This can be applied to any CSS property. If the screen (or web browser) is above or under a specific size, the browser will apply the respective code. You can even watch these effects happen in real-time by resizing your browser window.

While responsive design can seem complicated at first, the “TL;DR” is: using @media, you can effectively create a second design and apply it only when the screen hits a certain size.

The Viewport Meta Tag

To make responsive design work on mobile devices, you must include this meta code within the <head> of your HTML:

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

This code tells mobile devices that the content width of the page should equal the width of the device screen, and the initial scale should be 1 (no initial zoom).

Basic CSS Implementation

When working with an existing CSS file, you don’t need to alter your original code. Instead, you add to it, defining what should happen when a screen reaches a “breakpoint.”

Common breakpoints often include 640px and 480px, though you can use any size. When designing for multiple devices, it is generally better to use % rather than fixed px widths.

Using @media, you can change anything: container widths (e.g., changing from 780px on desktop to 100% on mobile), colors, fonts, and layouts.

Advanced Structure

The standard structure for a media query looks like this:

@media screen and (max-width: 480px) {
#item {
/* CSS rules go here */
}
.container {
/* More rules */
}
}

In this example, the browser says: “If the screen is 480px or less, apply these specific styles.” This allows for total layout shifts, such as moving from a multi-column desktop view to a single-column mobile view.

Deeper Look at the Syntax

The media query consists of the media type (as in what kind of media the user is viewing on, screen, print, so on) and the scope.

Media type : The most common is “screen” which targets computer screens, tablets and smartphones.

Logical Operators: You can use “and” to combine multiple conditions, so the code only runs if all conditions are satisfied.

Media Features: Are specific conditions like:

max-width (apply the CSS rules if the screen is SMALLER than the numbers you put in).

min-width (apply if the screen is LARGER then the numbers you put in).

 

Mobile 1st vs Desktop 1st

There are 2 schools of thought when approaching responsive design and media queries:

Desktop 1st: Write the normal CSS like usual for large screens ~ Then in the media queries scale things DOWN using various breakpoints going down in screen size to fix different design issues at the various breakpoints. For example:


/* Regular CSS*/
/*Defaults*/
html{}
body{}
.wrapper {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 400px) {}

Mobile 1st: Write the initial CSS for the smallest screens (like small phones/1 column layout) and then scale things UP using various breakpoints going up in screen size to fix the different issues as the screen gets bigger. For example:


/* Regular CSS*/
/*Defaults*/
html{}
body{}
.wrapper {}
@media screen and (min-width: 400px) {}
@media screen and (min-width: 800px) {}
@media screen and (min-width: 1200px) {}

 

Screen Orientation

You can also write CSS for the condition where a device is landscape or portrait:

Landscape


@media screen and (orientation: landscape) {
/* styles for landscape mode go here */
body {
background-color: lightblue;
}
}

Portrait


@media screen and (orientation: portrait) {
/* styles for portrait mode go here */
body {
background-color: purple;
}
}

You can also add other conditions


@media screen and (orientation: landscape) and (max-width: 900px) {
/* Styles in here */
}

Relative Units

Relative units are measurements that are relative to something else rather than being a “rigid” pixel amount. Using these increases accessibility, as users can change their browser’s default font settings to improve readability.

Note: The default browser font size is typically 16px.

  • rem units: Relative to the root (HTML) element. If the root is 16px, then 1rem = 16px. If you change the root to 12px, 1rem becomes 12px.
  • em units: Relative to the parent element. If a parent div is set to 24px, 1em inside that div equals 24px.
  • vh (Viewport Height): Measured relative to the viewport height. 50vh is exactly half of the screen’s height.
  • vw (Viewport Width): Measured relative to the viewport width. 100vw is the full width of the screen.
  • Percent Widths (%): Relative to the parent element. Unlike rigid pixels, percentages scale as the window resizes.

Max-Width Images

To prevent images from becoming too large while still allowing them to be responsive, use max-width. An image set to width: 100% will scale with the window, but adding max-width: 500px ensures it never exceeds its natural or intended size.

Controlling Overflow

Sometimes content “bleeds” outside of its parent container. We use the overflow property to manage this:

  • overflow-x: Controls horizontal overflow.
  • overflow-y: Controls vertical overflow.
  • visible: (Default) Content is not clipped and renders outside the element’s box.
  • hidden: Content is clipped, and the rest is hidden.
  • scroll: Content is clipped, but a scrollbar is added to see the rest.
  • auto: The browser decides whether to add a scrollbar based on whether content is actually overflowing.

 

Categorised in: ,

This post was written by amax

Comments are closed here.