Explication détaillée de la mise en page adaptative CSS

Cette fois, je vais vous apporter une explication détaillée de la mise en page adaptative CSS. Quelles sont les précautions de la mise en page adaptative CSS. Voici des cas pratiques, jetons un coup d'oeil.

Avant-propos

Cet article présentera la mise en page adaptative dans Mise en page Il existe deux mises en page adaptatives courantes : colonne de gauche colonne de droite fixe adaptative, gauche et droite. colonnes fixes et centrales adaptatives.

1. La colonne de gauche est fixe et la colonne de droite est un schéma de mise en page adaptatif

Explication : La colonne de gauche est fixe et la colonne de droite est adaptative, et celle de droite La colonne peut également être fixe et la colonne de gauche est adaptative. On l'observe couramment dans les interfaces de gestion de milieu de gamme, les affichages de listes sur le Web mobile, etc.

<p class="container">
    <p class="left">固定宽度</p>
    <p class="right">自适应</p>
</p>

1.1 Élément enfant float:left

Description : La colonne fixe de gauche est définie sur float:left, et la colonne de droite est définie sur float:left Les colonnes adaptatives sont définies sur float:none.

CSS :

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: none;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.2 Largeur de l'élément enfant :calc()

Description : largeur de la colonne adaptative Automatique calcul basé sur calc(), tel que : largeur du conteneur parent - largeur de colonne fixe.

Prise en charge du navigateur : IE 9+.

CSS :

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}

1.3 Affichage de l'élément parent : table

Explication : Le conteneur parent utilise display: table et table-layout : une fois corrigé, le conteneur enfant divisera la largeur du conteneur parent de manière égale. À ce stade, la largeur d'une certaine colonne est fixe et les colonnes restantes continueront à diviser le reste. largeur également.

Prise en charge du navigateur : IE 8+.

CSS :

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}
.left {
    display: table-cell;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    display: table-cell;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.4 Affichage de l'élément parent : flex

Support du navigateur : IE 10+.

CSS :

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    flex: 1;
    height: 100%;
    background-color: #9dc3e6;
}

2 Les colonnes de gauche et de droite sont fixes et celle du milieu est adaptative

<p class="container">
    <p class="left">左侧定宽</p>
    <p class="mid">中间自适应</p>
    <p class="right">右侧定宽</p>
</p>

2.1 Largeur de l'élément enfant :calc()

Description : La largeur de la colonne adaptative est automatiquement calculée en fonction de calc(), par exemple : largeur du conteneur parent - fixe largeur de colonne.

Prise en charge du navigateur : IE 9+.

CSS :

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    width: calc(100% - 100px - 100px);
    height: 100%;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

2.2 Affichage de l'élément parent : flex

Description : Définir l'affichage pour flex sur le parent element Lorsque , la flexion d'une colonne est de 1 et les colonnes restantes sont définies sur une largeur fixe.

Prise en charge du navigateur : IE 10+.

CSS :

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    height: 100%;
    flex: 1;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Connaissance de base du HTML dans le front-end ,

Le plug-in Vue implémente un carrousel mobile graphique

Position du modèle de boîte à flotteur 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!