Course Outline (Part 18)

Welcome to Part 18 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Responsive Web Design: Media Queries & Breakpoints.

Responsive Web Design is the practice of designing websites that adapt fluidly to different viewport resolutions, screen dimensions, and devices. Rather than building separate sites for mobile and desktop, CSS allows you to declare conditional styling rules using Media Queries that execute only when specific hardware or screen conditions are met.

Chapter 110: The Viewport Meta Tag

For responsive CSS media queries to work on mobile screens, you must include the viewport meta tag inside the HTML <head> block:

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

110.1 Why is it required?

Without this tag, mobile browsers emulate a desktop screen (usually 980px wide) and scale the entire layout down to fit the small display. This makes text unreadably tiny. The viewport tag tells the browser:

  • width=device-width: Scale the viewport width to match the physical width of the device screen.
  • initial-scale=1.0: Render the page at a normal 1:1 zoom ratio.

Chapter 111: Media Query Syntax & Types

A media query consists of a media type and conditional media features, declared using the @media rule:

@media screen and (max-width: 768px) {
  /* CSS rules here only execute on screens smaller than or equal to 768px wide */
  body {
    background-color: lightblue;
  }
}

111.1 Media Types

  • all: Matches all devices.
  • screen: Matches color computer screens, tablets, and smartphones.
  • print: Matches documents viewed in print preview mode.

111.2 Logical Operators

  • and: Combines multiple features. Both conditions must be true: @media screen and (min-width: 600px) and (max-width: 900px).
  • not: Negates a query: @media not print.
  • , (comma): Acts like an OR operator. Either condition can be true: @media screen, print.

Chapter 112: Core Media Features

CSS allows detecting various device characteristics and user preferences:

112.1 Width Features

  • min-width: Executes if the viewport width is greater than or equal to the specified value (standard for mobile-first styles).
  • max-width: Executes if the viewport width is less than or equal to the specified value.

112.2 Device Orientation (orientation)

Detects screen rotation:

  • portrait: Height is greater than width.
  • landscape: Width is greater than height.
@media (orientation: landscape) {
  .sidebar { display: block; }
}

112.3 Pointer Capabilities (hover)

Determines if the user’s primary input device can hover over elements (differentiates touch screens from mouse interfaces):

@media (hover: hover) {
  /* Hover effects only compile on mouse interfaces, avoiding sticky touches on mobile */
  .btn:hover { background-color: darkblue; }
}

112.4 Theme Preferences (prefers-color-scheme)

Detects system-wide dark mode settings:

@media (prefers-color-scheme: dark) {
  body { background: #000; color: #fff; }
}

Chapter 113: Responsive Practices & Self-Check

113.1 Practice Exercises

  1. Exercise 1: Responsive Layout Shift: Change a flex layout direction from row on desktop to column on mobile. 
    .flex-section {
  display: flex;
  flex-direction: row;
}
@media (max-width: 768px) {
  .flex-section {
    flex-direction: column;
  }
}
  2. Exercise 2: Mobile Print Hide: Hide interactive overlays and menu buttons when printing the web document. 
    @media print {
  .nav-menu, .chat-widget {
    display: none !important;
  }
}

113.2 Self-Check Questions

  1. What HTML tag is required inside the head for mobile styling to work?
    • Answer: The viewport meta tag (<meta name="viewport" ...>).
  2. What media type is used to target computer displays and smartphones?
    • Answer: screen.
  3. What operator is represented by a comma (,) inside media queries?
    • Answer: The OR operator.
  4. Does min-width: 600px apply to a viewport width of 550px?
    • Answer: No, it only applies to viewports wider than or equal to 600px.
  5. How do you prevent hover styles from sticking on touch screen devices?
    • Answer: Wrap hover styles inside the @media (hover: hover) feature query.
  6. What media feature detects user dark mode preferences?
    • Answer: prefers-color-scheme.
  7. What is the purpose of initial-scale=1.0?
    • Answer: It sets the initial zoom level of the page when loaded, preventing browsers from auto-scaling layout dimensions.
  8. Can you nest media queries inside selector blocks in modern vanilla CSS?
    • Answer: Yes, modern CSS native nesting supports placing media queries directly inside selectors.
  9. What is the difference between max-width and min-width?
    • Answer: max-width targets screens up to a size limit (desktop-first); min-width targets screens starting from a size limit (mobile-first).
  10. Does media query selection order matter in the CSS cascade?
    • Answer: Yes. If media query rules have equal selector specificity, rules placed lower in the stylesheet override those declared higher when active.

Discussion

Loading comments...