Responsive Web Design

One site to rule them all

• Mobile
• Tablet
• Desktop

Viewport

• The web browser part of the window that contains our web page
• Fixed size on mobile and tablet
• on desktops it can be changed (by changing the browser window size)

desktop pixel

vs.

mobile/tablet pixel

​The thing with

mobile (and tablet) pixels

• Mobile pixel can get pretty small (physically) 
• So there is a conversion ratio between "css pixels" and and actual physical pixels

Demo

1. Use your phone to visit: https://www.mydevice.io/
2. What's your device pixel ratio ?
3. Click "show me other devices" at the bottom and check out other devices pixel ratio

Meta viewport tag

• The ratio between the actual physical pixels and css pixels can be changed
• By default this ratio is 1 to 1 (so things can show pretty small on the device)
• We control it via the <meta  viewport> tag
• This meta tag was first implemented by the first iPhone browser and since then became a standard
• device-height is a supplied by each device so usually this will do:

<meta name="viewport" content="height=device-height">

Media queries

• Allow us to write css rules that apply only on certain circumstances (usually relating to viewport width)

@media (max-width: 600px) {
  .navbar {
    display: none;
  }

  .smallbar {
    display: block;
  }
}

Media queries

Example of a responsive style sheet

/* each viewport size gets its own css
   common css will appear outside */

body {
 ...
}

@media (min-width: 360px) and (max-width: 768px) { ... }
@media (min-width: 769px) and (max-width: 1240x) { ... }
@media (min-width: 1241px) { ... }

Demo

Use your phone to visit:

http://andreasbovens.github.io/understanding-viewport/

Press the different meta tag settings to see how it affects the layout

End