Qu'est-ce qu'une mise en page réactive ? Implémentation d'une mise en page réactive HTML-tutoriel HTML-php.cn

Le contenu de cet article porte sur ce qu'est une mise en page réactive ? La mise en œuvre d'une mise en page réactive HTML a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Première étape : ajoutez une ligne de balises méta de fenêtre d'affichage en tête du code de la page Web

(1) la fenêtre d'affichage est la largeur et la hauteur par défaut de la page Web. de la ligne de code ci-dessus est : La largeur de la page Web est égale à la largeur de l'écran par défaut (width=device-width), et le rapport de mise à l'échelle d'origine (initial-scale=1) est de 1,0, c'est-à-dire le rapport de mise à l'échelle initial la taille de la page Web occupe 100 % de la surface de l’écran.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Copier après la connexion

Tous les principaux navigateurs prennent en charge ce paramètre, y compris IE9. Pour ces 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]-->

Copier après la connexion

(2) X-UA-Compatible

X-UA-Compatible est un paramètre nouvellement ajouté depuis IE8 et n'est pas reconnu par les navigateurs inférieurs à IE8. En définissant la valeur de X-UA-Compatible dans la méta, vous pouvez spécifier les paramètres du mode de compatibilité de la page Web.

Navigateur #IE, qu'une DTD soit utilisée ou non pour déclarer la norme du document, IE8/9 utilisera le moteur IE7 pour afficher la page.

<meta http-equiv="X-UA-Compatible" content="IE=7">

Copier après la connexion

Navigateur #IE, IE8/9 utilisera le moteur IE8 pour afficher la page.

<meta http-equiv="X-UA-Compatible" content="IE=8">

Copier après la connexion

Le navigateur #IE, IE8/9 et les versions ultérieures utiliseront la version la plus élevée d'IE pour afficher la page.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">

Copier après la connexion

#IE=edge indique à IE d'utiliser le moteur le plus récent pour afficher les pages Web, et chrome=1 active Chrome Frame.

Le chrome=1 ici ne signifie pas que la technologie d'IE a été améliorée pour simuler le navigateur Chrome, mais est liée au Google Chrome Frame (Google Embedded Browser Framework GCF) développé par Google. Ce plug-in peut conserver l'apparence du navigateur IE de l'utilisateur, mais l'utilisateur utilise en réalité le noyau Chrome lors de la navigation sur le Web et prend en charge IE6/7/8 sur Windows XP et versions ultérieures.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Copier après la connexion

Étape 2 : Mise en page fluide

La position de chaque bloc dans la page est flottante, non fixe Si la largeur est trop petite, deux éléments ne peuvent pas être placés. défilera automatiquement en dessous des éléments précédents et ne débordera pas (débordement) dans le sens horizontal, évitant ainsi l'apparition de barres de défilement horizontales

.left{ width:30%; float:left}
.right{ width:70%; float:right;}

Copier après la connexion

Étape 3 : règles CSS @media, sélectivité Chargement du CSS

@media screen and (max-device-width: 400px) {  .left{ float:none;} }

Copier après la connexion

Lorsque l'écran est inférieur à 400, la gauche annule le flottement.

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. 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, le fichier css600-980.css est chargé.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />

Copier après la connexion

En plus de charger des fichiers CSS avec des balises html, vous pouvez également charger

@import url("css600.css") screen and (max-device-width: 600px);

Copier après la connexion

dans des fichiers CSS existants. Étape 4 : N'utilisez pas de largeur absolue, de taille de police <🎜. >

(1) width : auto ; / width : XX% ;

(2) La taille de la police est 100 % de la taille par défaut de la page, qui est de 16 pixels. N'utilisez pas la taille absolue "PX" pour les polices, utilisez la taille relative "REM"

html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem;

Copier après la connexion

Étape 5 : Adaptation des images

La "Conception Web adaptative" doit également implémenter l'adaptation des images Mise à l'échelle automatique .

img, object {max-width: 100%;}

Copier après la connexion

Les anciennes versions d'IE ne prennent pas en charge la largeur maximale, nous devons donc écrire :

img {width: 100%;}

Copier après la connexion

Lors de la mise à l'échelle des images sur la plate-forme Windows, une distorsion de l'image peut se produire. Pour le moment, vous pouvez essayer d'utiliser la commande propriétaire d'IE

img { width:100%; -ms-interpolation-mode: bicubic;}

Copier après la connexion

ou utiliser js--imgSizer.js

addLoadEvent(function() { 　　　　
        var imgs = document.getElementById("content").getElementsByTagName("img"); 　　　　      
        imgSizer.collate(imgs); 　　
});

Copier après la connexion