Responsive
Förkortningar
- RWD - Responsive web design
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
Programmeringsspråk
Formel
target ÷ context = result
Personer
Exempel på bild som använder attribut för 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 {}
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
