Responsive & Breakpoints

Introduction

Each device has a different screen size, it's important to adjust the layout accordingly for the best user experience.

One of the popular methods to adjust your screen layout for different devices is using Media Query.

Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

Anatomy of a Media Query

Media types

• all: Matches all devices

• print: Matches documents that are viewed in a print preview or any media that break the content up into pages intended to print.

• screen: Matches devices with a screen

• speech: Matches devices that read the content audibly, such as a screenreader.

Media features

@media (orientation: landscape) {     
  body {
    color: rebeccapurple;
  } 
}

Display quality

Color

Interaction

@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

NOTE with hover you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

User Preferences

Using min- and max- to match value ranges

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

Nesting and complex decision making

@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}

NOTE To combine media features you can use and in much the same way as we have used and above to combine a media type and feature.

If you have a set of queries, any of which could match, then you can utilize logic by using commas to separate these queries.

You can negate an entire media query by using the not operator.

Choosing Breakpoints

There are far too many devices, with a huge variety of sizes, to make it feasible to create style rules for each specific device. Instead of styling for a specific screen size, you style for a range of screen sizes. The points at which a media query is introduced are known as breakpoints.

NOTE Most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels) and then shrink the rendered result so that it fits in the display.

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

NOTE with Nilead you can define your own breakpoints, you can even have different breakpoints for different layouts. Please check the Style document to know how to define your own breakpoints.

Responsive images

It's very costly (bandwidth, speed) to load images bigger than the size you need.

We should load smaller size images for smaller screen resolution.

Using srcset

<img 
  alt="A baby smiling with a yellow headband."
  srcset="
    baby-s.jpg  300w,
    baby-m.jpg  600w,
    baby-l.jpg  1200w,
    baby-xl.jpg 2000w
  "
  sizes="70vmin"
>

We’re providing multiple copies of the same image and letting the browser pick the most appropriate one. We’re labeling them with their resource width, using w descriptors. So if baby-s.jpg is 300×450, we label it as 300w.

Using srcset with width (w) descriptors like this mean that it will need to be paired with the sizes attribute so that the browser will know how large of a space the image will be displayed in.

You can also use the X descriptor:

<img 
  alt="A baby smiling with a yellow headband."
  src="baby-lowres.jpg"
  srcset="baby-highres.jpg 2x"
>

Here, we’ve made the default (the src) the “low res” (1×) copy of the image. Defaulting to the smallest/fastest resources is usually the smart choice. We also provide a 2× version. If the browser knows it is on a higher pixel-density display (the 2x part), it will use that image instead.