Responsive Design

Device-Agnostic Approach To Responsive Web Design

1. Basics

WikiPedia: Responsive Web Design
Google: Responsive Web Design Basics
CSS-Tricks: Optimizing for Large-Scale Displays
The pro's guide to responsive web design
Device-Agnostic Approach To Responsive Web Design
Responsive Design

2. Viewport

The viewport meta tag tells the device at what scale to render the page.

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

 @viewport {
   width: device-width;
   zoom:1;
}

Viewport Mobile
Media Queries
W3C: Media Queries Level 4
CSS Breakpoints

Tests

2.1. Browser Support

https://caniuse.com/css-deviceadaptation

2.2. Resources

W3C: CSS Device Adaptation Module Level 1
Mozilla: Using the viewport meta tag to control layout on mobile browsers
quirksmode.org: A tale of two viewports

3. Layout

Multi-Device Layout Patterns

4. Markup

<!DOCTYPE html>
<div class="wrapper">
  <header>...</header>
  <main>
     <article>...</article>
     <nav>...</nav>
     <aside>...</aside>
  </main>
  <footer>...</footer>
</div>

5. CSS

CSS Guidelines
How to Order CSS Selectors

5.1. Units

5.1.1. Em

target ÷ context = result

So with our formula in hand, let’s turn back to that 24px headline. Assuming that our base font-size: 100% on the body element equates to 16px, we can plug those values directly into our formula. So if we need to express our h1’s target font size (24px) relative to its context (16px), we get:

24 ÷ 16 = 1.5

And there we are: 24px is 1.5 times greater than 16px, so our font-size is 1.5em:

h1 {
  font-size: 1.5em; /* 24px / 16px */
  font-style: italic;
  font-weight: normal;
}

Browser default considered as :root {font-size:16px}
Pixel	Em	Percent	Keyword	Notes
8px	0.5em	50%
9px	0.5625em	56.25%
10px	0.625em	62.5%	x-small
11px	0.6875em	68.75%
12px	0.75em	75%
13px	0.8125em	81.25%	small
14px	0.875em	87.5%
15px	0.9375em	93.75%
16px	1em	100%	medium
17px	1.0625em	106.25%
18px	1.125em	112.5%	large
19px	1.1875em	118.75%
20px	1.25em	125%
21px	1.3125em	131.25%
22px	1.375em	137.5%
23px	1.4375em	143.75%
24px	1.5em	150%	x-large
26px	1.625em	162.5%
28px	1.75em	175%
30px	1.875em	187.5%
32px	2em	200%	xx-large
34px	2.125em	212.5%
36px	2.25em	225%
38px	2.35em	235%
40px	2.5em	250%
42px	2.625em	262.5%
44px	2.75em	275%
46px	2.875em	287.5%
48px	3em	300%

Tools

5.1.2. Resources

5.2. Breakpoints

 
@media screen and (min-width: 1200px) {
    body { font-size: 110%; } /* Increase the font size */
}
@media screen and (min-width: 1400px) {
    html { padding: 0 15%; } /* Reduce the container width */
}
@media screen and (min-width: 1600px) {
    body { font-size: 125%; } /* Increase the font size */
}
@media screen and (min-width:1800px) {
    html { padding: 0 20%; } /* Reduce the container width */
}

5.3. Flexbox

Flexbox vs Grid

Flexbox: content dictates layout
Grid: container dictates layout (to some extent)

Flexbox is great, it just isn't the best thing for overall page layouts.
Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace. The sooner we can use them both in production, the better.

main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

@media all and (max-width: 600px) {
  /* Too narrow to support three columns */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* Return them to document order */
    order: 0; width: auto;
  }
}

5.3.1. Browser Support

https://caniuse.com/flexbox

5.3.2. Resources

W3C: CSS Flexible Box Layout Module Level 1
CSS-Tricks: A Complete Guide to Flexbox

https://www.mediaevent.de/css/display-flex.html
https://www.mediaevent.de/tutorial/flexbox.html

5.4. Grid

main { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; }
article { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; min-width: 12em;     }

@media all and (max-width: 60em) {
  /* Too narrow to support three columns */
  main { display: block; }
}

Examples

5.4.1. Browser Support

https://caniuse.com/css-grid

5.4.2. Resources

W3C: CSS Grid Layout Module Level 1
CSS-Tricks: A Complete Guide to Grid

6. Typography

6.1. Font Size

html {font-size: 100%;}

6.2. Leading (Line Height)

6.3. Measure (Line Length)

45 to 85 characters
An estimate for optimal line length: between 45 and 75-85 characters (including spaces and punctuation), with 65 the “ideal” target value.

1rem = 1character
Using a rough estimate of 1rem = 1character, we can control the flow of text for a single column of content.

.container {
  width: 100%;
}
 
@media (min-width: 85rem) {
  .container {
    width: 65rem;
  }
}

6.4. Hyphenation

6.5. Resources

Responsive Typography

7. Helpers

8. Frameworks

Bulma
Spectre.css
Foundation
Bootstrap - > build a theme for R6
Ulkit
Semantic UI

Files

viewport.svg

Monitor sizes as the basis of breakpoints

9.4 KiB

09.12.2018 15:57