Comment implémenter une mise en page réactive avec CSS

Le contenu partagé avec vous dans cet article concerne la méthode de mise en œuvre d'une mise en page réactive avec CSS. Le contenu a une grande valeur de référence. J'espère qu'il pourra aider les amis dans le besoin.

Utilisez CSS pour implémenter une mise en page réactive

La mise en page réactive semble très haut de gamme et difficile, mais en fait, une mise en page réactive peut également être obtenue en utilisant uniquement CSS
Tout ce que vous avez à faire est utiliser CSS. Je n'ai pas reçu la requête, voici comment l'utiliser :

Trois façons d'utiliser @media

1 Utilisez-le directement dans le fichier CSS :

@media 类型 and (条件1) and (条件二){
    css样式
}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}

.

2 .Utilisez @import pour importer

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

3. est également la méthode la plus couramment utilisée - - Utilisez directement la connexion par lien, et l'attribut media est utilisé pour définir la méthode de requête

Ce qui suit est un code HTML de mise en page réactif simple :

nbsp;html>


    <meta>
    <title>响应式</title>
    <link>
<link>
    <link>


    <p>头部</p>
    <p>
        </p><p>左边</p>
        <p>中间</p>
        <p>右边</p>
    
    <p>底部</p>

Voici le style CSS :

*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow; 
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}

Code de style

.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}

Code de style

.left,.center,.right{
    float:none;
    width:100%;
}

Lorsque la fenêtre est plus grande que 1024px, la commande est compressé et aucun autre changement ne se produira :

Lorsque la fenêtre est plus petite que 1024px et plus grande que 720px, la colonne de droite est déflotée et affichée ci-dessous :

Lorsque la fenêtre est inférieure à 720 px, les trois colonnes de gauche, du milieu et de droite ne sont pas flottantes et la largeur est de 100 % :

D'accord, la mise en page est si simple, mais maîtriser les détails nécessite quand même une pratique constante.

Recommandations associées :

Introduction au changement du style de la souris en main à l'aide de CSS

Description et exemples du modèle de boîte 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!