Latest web development tutorials

Responsive Web Design - Grid View

Qu'est-ce qu'un affichage de la grille?

Beaucoup de pages Web sont de conception basé sur une grille, ce qui signifie que la page est basée sur la disposition des colonnes.

Utilisez la vue de la grille nous aider à concevoir des pages Web. Cela nous permet d'ajouter un élément de page devient plus facile.

vue grille Responsive est habituellement de 12, une largeur de 100%, lorsque la fenêtre du navigateur est redimensionnée automatiquement rétractable.

vue grille Responsive


Créer une vue de grille sensible

Ensuite, nous créons une vue de grille réactive.

Tout d' abord assurez - vous que tous les éléments HTML ont la propriétébox-sizing et mis à border-box.

Assurer des marges et des bordures comprises entre la largeur et la hauteur de l'élément.

Ajoutez le code suivant:

* {
    box-sizing: border-box;
}

Voir plus box-sizing s'il vous plaît cliquez sur: CSS3 propriété box-sizing .

L'exemple suivant montre une page Web en réponse simple qui contient deux colonnes:

Exemples

.menu {
largeur: 25%;
float: left;
}
.main {
largeur: 75%;
float: left;
}

Essayez »

Les exemples incluent les deux ci-dessus.

système de grille 12 peut mieux contrôler le site réactif.

Premièrement, nous pouvons calculer le pourcentage de chaque colonne: 100% / 12 = 8,33%.

Spécifié dans chaqueclasse de colonne,class = "collaboration" est utilisé pour définir chaque colonne a plusieurs durée:

CSS:

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

Essayez »

Toutes les colonnes laissées flottantes, espacement (padding) à 15px:

CSS:

[Classe * = "collaboration"] {
float: left;
padding: 15px;
border: 1px rouge solide;
}

Chaque ligne en utilisant <div> package. Toutes les colonnes doivent ajouter jusqu'à 12:

<Class Div = "ligne">
<Class Div = "col-3 "> ... </ div>
<Class Div = "col-9 "> ... </ div>
</ Div>

comportement de la colonne de gauche flottante, et ajouter float clair:

CSS:

.row: après {
contenu: "";
clear: both;
display: block;
}

Nous pouvons ajouter un peu de style et la couleur, laissez-le regarder mieux:

Exemples

html {
font-family: "Lucida Sans" , sans-serif;
}
.header {
background-color: # 9933cc;
couleur: #ffffff;
padding: 15px;
}
.menu ul {
list-style - type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: # 33b5e5;
couleur: #ffffff;
box-shadow: 0 1px 3px rgba (0,0,0,0.12), 0 1px 2px rgba (0,0,0,0.24);
}
.menu li: hover {
background-color: # 0099CC;
}

Essayez »