Voir aussi : spécifications du W3C sur les media queries CSS3
INDEX
Demo
C’est par là : https://italic.fr/test/responsive/
Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Responsive Design Test</title> <!-- use the device's width and allow zooming --> <meta name="viewport" content="width=device-width"/> <!-- common styles such as css reset --> <link rel="stylesheet" type="text/css" href="css/common.css" media="all" /> <!-- target iPhones --> <link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)"> <link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape)"> <link rel="stylesheet" href="css/smartphone-portrait.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait)"> <!-- target iPads --> <link rel="stylesheet" href="css/tablet.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"> <link rel="stylesheet" href="css/tablet-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"> <link rel="stylesheet" href="css/tablet-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"> <!-- target retina displays no mather what type of device the user's browsing on --> <link rel="stylesheet" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2)"> </head> <body> <h1 id="smartphone">Smartphone</h1> <h1 id="tablet">Tablette</h1> <h1 id="widescreen">Ordinateur</h1> <h2 id="landscape">Paysage</h2> <h2 id="portrait">Portrait</h2> <h3 id="retina">Retina</h3> <h4 id="normal"><strong>Non</strong> Retina</h3> </body> </html>
Common styles
html, body font-family: Arial; font-size:12px; h1 font-size:40px; h2 font-size:30px; h3 font-size:20px; h4 font-size:14px; #smartphone, #tablet, #portrait, #landscape, #retina display:none;
Macbook Pro
Smartphone styles
css/smartphone.css
#widescreen display:none; #smartphone display:block;
Smartphone Landscape styles
css/smartphone-landscape.css
#landscape display:block;
iPhone 4 (landscape)
iPhone 3GS (landscape)
Smartphone Portrait styles
css/smartphone-portrait.css
#portrait display:block;
iPhone 3GS (portrait)
iPhone 4S (portrait)
Tablet styles
css/tablet.css
#widescreen display:none; #tablet display:block;
Tablet Landscape styles
css/tablet-landscape.css
#landscape display:block;
iPad 2 (landscape)
iPad 3 (paysage)
Tablet Portrait styles
css/tablet-portrait.css
#portrait display:block;
iPad 2 (portrait)
iPad 3 (portrait)
Classic display styles
css/widescreen.css
#widescreen display:block;
MacBook Pro Retina
Android
L’hétérogénéité des appareils pose problème :
À moins de faire une version par type d’appareil, je ne vois pas de solution…
Émulateur ANDROID, WGA800, 400×800, 240dpi, landscape
L’inconvénient
À moins d’être très riche, ou d’habiter dans un Apple Store, c’est vraiment chiant à tester (i.e. : je suis allé à l’Apple Store).
À venir
Création, découpage, et inclusion d’images classiques / Retina avec Photoshop et les media queries CSS3.
