Implémentation simple et réactive de CSS

1. Autoriser l'ajustement automatique de la largeur de la page Web

Tout d'abord, ajoutez une ligne de balises méta de fenêtre en tête du code de la page Web.

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport est la largeur et la hauteur par défaut de la page Web. La ligne de code ci-dessus signifie que la largeur de la page Web est égale à la largeur de l'écran par défaut (width=device-width), et la le rapport de mise à l'échelle d'origine (initial-scale=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 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. Utilisez la requête multimédia CSS3 @media query

Il existe trois façons d'exprimer les requêtes multimédias :

1 Utilisez

< directement dans le. Fichier CSS 🎜>@media 类型 and (条件1) and (条件二){}css样式

Exemple :

@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

2. Utilisez @import pour importer

@import url("css/moxie.css") all and (max-width:980px);

3. connection, attribut media Utilisé pour définir la méthode de requête :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3. Quelques autres points à noter

1 Ne pas utiliser de largeur absolue

Puisque la page Web s'ajustera. la disposition en fonction de la largeur de l'écran, elle ne peut pas être utilisée. La disposition en largeur absolue ne peut pas utiliser d'éléments avec une largeur absolue. Celui-ci est très important. Plus précisément, le code CSS ne peut pas spécifier la largeur des pixels : width: xxx px ; il ne peut spécifier que le pourcentage de width : width: xx%; ou width: auto ; de

Les unités de police courantes en CSS sont px, em, rem et %rempx3. Grille fluide (fluid grid)

La signification de « mise en page fluide ». est que chaque zone Les positions des blocs sont flottantes et non fixes. L'avantage de

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

float est que si la largeur est trop petite pour contenir deux éléments, l'élément suivant défilera automatiquement en dessous de l'élément précédent et ne débordera pas (débordement) dans le sens horizontal, évitant ainsi le défilement horizontal l'apparence du bar.

De plus, vous devez être très prudent lorsque vous utilisez le positionnement absolu (position : absolue).

4. Image adaptative (image fluide)

En plus de la mise en page et du texte, la « conception Web adaptative » doit également mettre en œuvre une mise à l'échelle automatique des images.

Cela ne nécessite qu'une seule ligne de code CSS :

img { max-width: 100%;}

Cette ligne de code est également valable pour la plupart des vidéos intégrées dans des pages Web, elle peut donc être écrite comme :

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

Les anciennes versions d'IE Max-width ne sont pas prises en charge, je dois donc écrire :

img { width: 100%; }

De plus, 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 { -ms-interpolation-mode: bicubic; }

ou imgSizer.js d'Ethan Marcotte :

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

Apprentissage recommandé :

CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!