3. Définition
Le Responsive Web design est une approche de conception
Web qui vise à l'élaboration de sites offrant une
expérience de lecture et de navigation optimales pour
l'utilisateur quelle que soit sa gamme d’appareil.
http://www.alsacreations.com
18. Solution : relative units
img{
max-width:100%;
height:auto;
}
L’image s’affichera à sa taille normal sauf si
elle est plus large que son parent. Dans ce
cas elle prendra la largeur de son parent.
19. Et pour les background ?
img{
background: url('test.jpg') no-repeat 50% 50%;
-webkit-background-size: cover; /* Chrome & Safari */
-moz-background-size: cover; /* Firefox */
-o-background-size: cover; /* Opera */
background-size: cover;
}
La taille de l’image s’adapte au conteneur en
centrant verticalement et horizontalement.
21. Définition
Une media query est une expression dont la valeur est
toujours true ou false. Il suffit d'associer les différentes
déclarations possibles avec un opérateur logique pour
définir l'ensemble des conditions à réunir pour l'application
des styles compris dans le bloc adjacent.
http://www.alsacreations.com
22. Types de média (css2)
screen - handheld - print - speech -
braille - embossed - projection - tv
30. CSS Viewport Units
The viewport-percentage lengths are relative to the size of
the initial containing block. When the height or width of the
initial containing block is changed, they are scaled accordingly.
1vw = Equal to 1% of the width of the initial containing block.
1vh = Equal to 1% of the height of the initial containing block.
1vmin = Equal to the smaller of ‘vw’ or ‘vh’
1vmax = Equal to the larger of ‘vw’ or ‘vh’.
http://www.w3.org/TR/css3-values/
31. Media Queries & em
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
h1 {
font-size:1.5em;
}
}
33. Bibliographie
The 2014 Guide to Responsive Web Design - Nick Pettit
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design
Using CSS Background-size Responsively - Kean Richmond
http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/
Les Media Queries CSS3 - dew (Alsacréations)
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
Techniques for Responsive Typography - Sara Soueidan
http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/
Pragmatic responsive design - yiibu
http://fr.slideshare.net/yiibu/pragmatic-responsive-design
Responsive Webdesign – présent et futur de l’adaptation mobile - Stéphanie Walter
http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html
34. Crédits
Loïc Le Meur on Google Glass - Loïc Le Meur
http://commons.wikimedia.org/wiki/File:A_Google_Glass_wearer.jpg