CSS Responsive Design

I. What is responsive design?

To ensure that a website is readable and visually appealing across all devices, regardless of screen size, we apply responsive design.

Responsive design refers to the ability of a website to resize and reorganize its content based on:

  • The size of other content on the website.
  • The size of the screen the website is being viewed on.

We also need to think about loading smaller images for mobile devices and user experiences in mobile.

A popular approach for responsive design is a mobile-first approach, which we plan our design for mobile devices first then adapt them for larger screen.

II. Viewport meta tag

The viewport meta tag is placed inside our <head> section and tells the browser at what width the viewport of the browser should be.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
  • Name attribute: viewport

  • Content of this meta tag:

    • The width=device-width: specifies that the witdh of the viewporty the device’s width (which will vary depending on the device).

    • The initial-scale=1.0: sets the initial zoom level when the page is first loaded by the browser.

III. Media Queries

CSS uses media queries to tell the browser how to style an element at a particular screen sizes.

For example, an image can be styled differently at 500px in width on a mobile device and 1400px in width on a desktop.

Example 1: If the browser window is 1400px or smaller, the font size of H2 will be 40px and li will be 20px.

@media only screen and (max-width: 1400px) {
  h2 {
    font-size: 40px;
  }
  nav li {
    font-size: 20px;
  }
}

Example 2: If the browser window is 800px or larger, the background color will be lightblue:

@media only screen and (min-width: 800px) {
  body {
    background-color: lightblue;
  }
}

Note

  • The minimum and maximum width of elements can be set using min-width and max-width.
  • The minimum and maximum height of elements can be set using min-height and max-height.
  • When the height is set, we can set its width to auto so that the media scales proportionally.
  • A background image of an HTML element will scale proportionally when we set background-size: cover:
  • Some max-width values to set: 1400px, 960px, 700px, 560px

IV. Responsive units

1. em

em represents the size of the current font.

For example, if the font is 16 pixels (which is normally the default size of text in a browser), then 2 ems is equal to 32 pixels.

h2 {
  font-size: 2em;
}

2. rem

rem checks the root element.

html {
  font-size: 20px;
}

h2 {
  font-size: 1.5rem;
}

In the example above, h2 has 30px.

3. Usage of Percentages

Instead of defining a fixed width using units like px, or cm, percentages can be used to set height, width, padding and margin.

@media only screen and (max-width: 560px) {
  nav li {
    font-size: 16px;
    display: block;
    width: 100%;
    margin: 12px 0;
  }
}

4. Dots Per Inch (DPI)

To target by resolution, we can use the min-resolution and max-resolution media features. The resolution value is dots per inch (dpi) or dots per centimeter (dpc)

@media only screen and (min-resolution: 300dpi) {
  /* CSS for high resolution screens */
}