Chapter 22: Responsive CSS

2.1 Responsive Web Design

Responsive web design makes your page look good on desktops, tablets, and mobile phones using only HTML and CSS.

2.2 RWD Viewport

Use this in the <head> of your HTML:

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

2.3 CSS Media

Media Types

all - All devices (default)
print - For printers
screen - For screens (desktop, tablet, mobile)

Example: media="screen,print"

Media Queries

The background changes based on screen width or orientation:

body { background-color: blue; }
@media screen and (min-width: 480px) {
  body { background-color: green; }
}
@media only screen and (orientation: landscape) {
  body { background-color: grey; }
}

2.4 RWD Grid View

Example of a responsive 12-column grid layout:

DIV 1

DIV 2

DIV 3

2.5 Mobile-first vs Desktop-first

Mobile-first: Start with small screens, then add styles for larger devices using min-width.

Desktop-first: Start with large screens, then adjust for smaller devices using max-width.