Responsive

Content is like water Boken om Responsive web design av Ethan Marcotte från A list apart

Förkortningar

  • RWD - Responsive web design
Logotyp för FA - Font Awesome

Namn och kodpunkt för ikoner från Font Awesome 4.7.0 (den sista versionen som var helt gratis)

  • fa-mobile&#xf10b
  • fa-tablet
  • fa-laptop
  • fa-desktop
  • fa-television

Citat

Mobile first
With great power comes great responsibility
Responsive websites automatically resize based on the screen size of the visitor’s browser
Logotyp för CSS 3

Programmeringsspråk

Formel

target ÷ context = result Ethan Marcotte

Personer

Exempel på bild som använder attribut för srcset

Exempel på bild som använder srcset

Vad innebär responsiv?

  • Flexible grid
  • Media queries

Media queries

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect- ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Media queries för upplösning i CSS

@media (max-width: 640px) {}

Media queries för ratio i CSS

@media (aspect-ratio: 1/1) {}

Media queries för upplösning i CSS

@media (max-width: 640px) {}

Media queries för orientation i CSS

@media (orientation: landscape) {} @media (orientation: portrait) {}

Media queries för skrivare i CSS

@media print {} Logotyp för Sökmotorn

Exempel på webbplatser

https://developers.google.com/speed/pagespeed/module/filter-image-responsive Logotyp för A list apart

Externa länkar