Maison > Article > interface Web > Qu'est-ce qu'une mise en page réactive ? Implémentation d'une mise en page réactive HTML

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

不言original: 2018-08-06 16:31:427648parcourir

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" />

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]-->

(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">

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

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

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">

#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">

É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;}

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

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

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" />

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);

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;

É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%;}

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

img {width: 100%;}

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;}

ou utiliser js--imgSizer.js

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

Articles Liés

Voir plus