Cet article présente la mise en œuvre de la conception Web réactive (adaptative) HTML5 et la partage avec tout le monde, comme suit :
Étape 1 : ajoutez une ligne de balises méta de fenêtre d'affichage à l'en-tête du code de la page Web.
<meta name=viewport content=width=device-width, initial-scale=1 />
la fenêtre d'affichage est la largeur et la hauteur par défaut de la page Web. La ligne de code ci-dessus signifie : la largeur de la page Web est égale à la largeur de l'écran par défaut (largeur = largeur de l'appareil) et au rapport de mise à l'échelle d'origine (échelle initiale). =1) est de 1,0, c'est-à-dire que la taille initiale de la page Web occupe 100 % de la surface de l'écran.
Tous les principaux navigateurs prennent en charge ce paramètre, y compris IE9. Pour les navigateurs plus anciens (principalement IE6, 7, 8), vous devez utiliser css3-mediaqueries.js
<!--[if lt IE 9]> <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]-- >
Étape 2 : (Remarque) N'utilisez pas de largeur absolue ni de taille de police.
largeur:auto; / largeur:XX%;
Troisième étape : (Remarque) Taille de la police
La taille de la police correspond à 100 % de la taille par défaut de la page, soit 16 pixels.
N'utilisez pas la taille absolue PX pour les polices, utilisez la taille relative REM
html{taille de police : 62,5 % ;} corps {police : normal 100 % Arial, sans-serif ; taille de police : 14px ; taille de police : 1,4rem }Étape 4 : Disposition du flux
La signification d’une disposition fluide est que la position de chaque bloc est flottante et non fixe.
.left{ largeur:30%; float:left} .right{ largeur:70%;L'avantage est que si la largeur est trop petite pour accueillir deux éléments, l'élément suivant défilera automatiquement vers le bas de l'élément précédent sans déborder dans le sens horizontal, évitant ainsi l'apparition de barres de défilement horizontales.
Étape 5 : Choisissez de charger CSS
Le cœur de la conception Web adaptative est le module Media Query introduit par CSS3. Détectez automatiquement la largeur de l'écran puis chargez le fichier CSS correspondant
<link rel=stylesheet type=text/css media=screen et (max-device-width : 600px) href=style/css/css600.css />
Le code ci-dessus signifie que si la largeur de l'écran est inférieure à 600 pixels (max-device-width : 600px), chargez le fichier css600.css.
Si la largeur de l'écran est comprise entre 600 pixels et 980 pixels, chargez le fichier css600-980.css
<link rel=stylesheet type=text/css media=screen et (min-width : 600px) et (max-device-width : 980px) href=css600-980.css />
Aussi (non recommandé) : En plus de charger des fichiers CSS avec des balises html, vous pouvez également les charger dans des fichiers CSS existants
Écran @import url(css600.css) et (largeur maximale de l'appareil : 600 px) ;
Étape 6 : règles CSS @media
@media screen et (max-device-width : 400px) { .left{ float:none;} }Lorsque l'écran est inférieur à 400, la gauche annule le flottement
Étape 7 : Adaptation des images
La conception Web réactive doit également mettre en œuvre une mise à l’échelle automatique des images.
img, objet {largeur maximale : 100 % ;}Les anciennes versions d'IE ne prennent pas en charge la largeur maximale, je dois donc écrire :
img {largeur : 100 % ;}Lors de la mise à l'échelle des images sur la plate-forme Windows, une distorsion de l'image peut se produire. À ce stade, vous pouvez essayer d'utiliser la commande propriétaire d'IE
img {largeur : 100 % ; -ms-interpolation-mode : bicubique ;}Ou utilisez js--imgSizer.js
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });Remarque : Si possible, il est préférable de charger des images de différentes résolutions en fonction des différentes tailles d'écran.
Opération simple :
<style type=text/css> img{ max-width:100%;} vidéo{ max-width:100%; height:auto;} header ul li{ float:left list-style:none list-style-; type:aucun; margin-right:10px;} en-tête select{display:none;} @media (max-width:960px){ en-tête ul{ display:none;} en-tête select{ display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>Accueil</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>Accueil</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ option> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.