Week 9. Responsive CSS

Viewport in HTML

First, remember it’s important to have the following line inside the <head> of your HTML document:

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

More info over here:

Media Queries in CSS

Introduction

Media queries are a type of CSS that allow content to adapt to various conditions. They are a fundamental technology of responsive web design.

There is a lot of flexibility built into media queries. You can target specific screen widths, specific devices, or specific outputs (like print).

Syntax

A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive.

See more specifics regarding syntax:

Making websites responsive

Generally speaking, I think it’s not good practice to target specific devices since new devices are being invented all the time. Instead, it is better (and more future-proof) to target specific screen-based numerical breakpoints.

Examples

Open these examples and try changing the width of the result window:


In the last example, here’s the CSS:

nav {
  text-align: center;
  border-bottom: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 1em 0.5em 1.5em;
}

a {
  color: black;