Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Informationen zu CSS-Responsive-Implementierungscode und -Effekten

不言
Freigeben: 2018-07-24 10:51:23
Original
1758 Leute haben es durchsucht

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit dem CSS-Responsive-Implementierungscode und den Auswirkungen. Der Inhalt ist von großem Referenzwert und kann Freunden in Not helfen.

1. CSS zur Erzielung von Reaktionsfähigkeit

CSS zur Implementierung eines reaktionsfähigen Website-Layouts erfordert Medienabfragen in CSS:

  • @media type und (Bedingung 1) und (Bedingung 2) {css style}

Wir müssen nur das von width abgeleitete Attribut max-width verwenden, sondern nur die Breite des sichtbaren Bereichs definieren der Seite im Ausgabegerät, um den geänderten Stil zu steuern.
HTML-Code ist wie folgt:

nbsp;html>


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

    <link>
    <link>
    <link>


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

Nach dem Login kopieren

demo01.css-Stil ist wie folgt:

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:20%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:55%;
    background-color:gray;
    float:left;
    height:300px;
    margin:0 2.5%;
}
.right{
    width:20%;
    background-color:yellow;
    float:left;
    height:300px;
}
Nach dem Login kopieren

demo02-Stil ist wie folgt:

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:30%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:70%;
    background-color:gray;
    float:left;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}
Nach dem Login kopieren

demo03-Stil:

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:100%;
    background-color:orange;
    height:300px;
}
.center{
    width:100%;
    background-color:gray;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}
Nach dem Login kopieren

Rendering:

Informationen zu CSS-Responsive-Implementierungscode und -Effekten

Wie es aussieht, wenn das Fenster größer als 1024 Pixel ist

Informationen zu CSS-Responsive-Implementierungscode und -Effekten

Wenn es größer als 640 und kleiner als 980 ist, befindet sich die rechte Spalte unten

Informationen zu CSS-Responsive-Implementierungscode und -Effekten

Wenn es weniger als 480 beträgt. Wenn die Navigationsleiste minimiert ist, werden die drei Körperteile vertikal angezeigt. Wenn das Fenster weiter verkleinert wird, ändert es sich nicht mehr und der Bereich wird kleiner komprimiert

Verwandte Empfehlungen:

CSS-Methode zum Implementieren eines responsiven Layouts

CSS-Code zum Implementieren eines responsiven Drop- Abwärtsmenü

Das obige ist der detaillierte Inhalt vonInformationen zu CSS-Responsive-Implementierungscode und -Effekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!