Web Type

Responsive Design

Responsive web design refers to the ability of websites to adapt the presentation of content to a range of devices and media.

Responsive design involves:

Meta tag

Insert this meta tag within the <head></head> of all your html pages. This ensures that the browser will register the physical width of the device’s screen as its screen width.

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

Fluid layout

A fluid layout often has:

The following CSS relative units may be useful for scalable designs.

unit description example
rem font size of the root element (html) font-size: 2rem;
em font size of parent element font-size: 2em;
vw 1% of viewport’s width width: 100vw;
vh 1% viewport’s height height: 100vh;

Fluid Images

Any embedded assets, such as images, videos, etc will need to scale appropriately.

Usually, the image container has defined width. The image itself then has max-width: 100%; to scale down if its container resizes, but would never scale up to be larger than its original size.

<div class="container">
  <img src="image.png">
</div>

.container {
  width: 33%;
}

.figure img {
  width: 100%;
}

Retina displays

Media queries

Media queries are the crux of responsive design. They define the breakpoints at which different CSS rules are applied. Any CSS rule can be adjusted within the media queries.

You can approach this in two ways.

  1. Desktop first, defining max-width breakpoints to go smaller
  2. Mobile first, defining min-width breakpoints to go larger
    • Sometimes you need to use both min and max
@media screen and (max-width: 480px){ 
  .container{
    width: 100%;
  }
}

Note: nested brackets

Common Responsive Layout Techniques