Responsive
![Content is like water Content is like water](https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Content-is-like-water.svg/2560px-Content-is-like-water.svg.png)
![Boken om Responsive web design av Ethan Marcotte från A list apart Boken om Responsive web design av Ethan Marcotte från A list apart](/image/responsive.png)
Förkortningar
- RWD - Responsive web design
![Logotyp för FA - Font Awesome Logotyp för FA - Font Awesome](/img/fa.png)
Namn och kodpunkt för ikoner från Font Awesome 4.7.0
(den sista versionen som var helt gratis)
- fa-mobile

- 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 Logotyp för CSS 3](/image/css.png)
Programmeringsspråk
Formel
target ÷ context = result
![Ethan Marcotte Ethan Marcotte](https://www.ostraining.com/cdn/images/conferences/ethan-marcotte.jpg)
Personer
Exempel på bild som använder attribut för srcset
![Exempel på bild som använder srcset Exempel på bild som använder srcset](img/responsive/image-src.png)
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 Logotyp för Sökmotorn](/apple-touch-icon-precomposed.png)
Exempel på webbplatser
- Appicns.com
- Boston globe
- Upperdog
- Staffanstorp
- Ivo Mynttinen.com
- Left is right
- Sebastian Ingrosso.com
- Tävlingsmaskinen.se
- Dareville.com Swajp
- Flatmate
- Gates notes
- Sökmotorn
Länkar
https://developers.google.com/speed/pagespeed/module/filter-image-responsive