So implementieren Sie ein responsives Layout mit CSS

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit der Methode zur Implementierung von responsivem Layout mit CSS. Ich hoffe, dass er Freunden in Not helfen kann.

Verwenden Sie CSS, um responsives Layout zu implementieren

Responsives Layout fühlt sich sehr hochwertig und schwierig an, aber tatsächlich kann responsives Layout auch nur mit CSS erreicht werden
Alles, was Sie tun müssen, ist CSS verwenden. Ich habe die Abfrage nicht erhalten. So verwenden Sie sie:

Drei Möglichkeiten, @media zu verwenden

1. Verwenden Sie sie direkt in der CSS-Datei:

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

2. Verwenden Sie @import import

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

3 Es ist auch das am häufigsten verwendete Methode - direkt Bei Verwendung einer Linkverbindung wird das Medienattribut verwendet, um die Abfragemethode festzulegen

Das Folgende ist ein einfacher responsiver Layout-HTML-Code:

nbsp;html>


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


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

Das Folgende ist der CSS-Stil:

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

Stilcode

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

Style Code

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

Wenn das Fenster größer als 1024px ist, wird der Befehl komprimiert und es werden keine weiteren Änderungen vorgenommen:

Wenn das Fenster kleiner als 1024 Pixel und größer als 720 Pixel ist, wird die rechte Spalte nicht schwebend angezeigt und unten angezeigt:

Wenn das Fenster kleiner als 720 Pixel ist. Wenn alle drei Spalten links, in der Mitte und rechts nicht schwebend sind und die Breite 100 % beträgt:

Nun, das Layout ist so einfach und die Details müssen noch geübt werden.

Verwandte Empfehlungen:

Einführung in die Änderung des Maus- in Handstils mithilfe von CSS

Beschreibung und Beispiele des CSS-Boxmodells

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein responsives Layout mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!