So implementieren Sie responsives Webdesign

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

Verwendung der Medienabfrage

Medien Die Medienabfrage enthält einen optionalen Medientyp und enthält gemäß der CSS3-Spezifikation null oder mehr Ausdrücke, die die Medienfunktionen beschreiben, die schließlich als wahr oder falsch analysiert werden . Wenn der in der Medienabfrage angegebene Medientyp mit dem Gerätetyp übereinstimmt, der zum Anzeigen des Dokuments verwendet wird, und alle Ausdrücke als wahr ausgewertet werden, ist das Ergebnis der Medienabfrage wahr.

• 500px - 800px-Geräte zwischen @media screen und (min-width: 500px) und (max-width: 800px) { ... }

• Mindestbreite 500 @media screen und (min-width : 500px){... }

• @media not print and (max-width: 1200px)

Verwendung:

Beispiel

html:

nbsp;html>


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

    <link>
    <link>
    <link>


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

css1:

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
}

.left{
    width:100%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:100%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css2:

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
    
}

.left{
    width:30%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:70%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css3:

 .body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    background:#0f0;
    
}

.left{
    width:20%;
    height:200px;
    
}

.zhon{
    width:45%;
    height:350px;
    margin:0 20px;
    
}

.right{
    width:25%;
    height:200px;
}

Laufergebnisse:

1,

2.

3.Zusammenfassung: .Media QueryMedia Abfragen können unter verschiedenen Bedingungen unterschiedliche Stile verwenden, sodass die Seite bisher unterschiedliche Rendering-Effekte unter verschiedenen Endgeräten erzielen kann Abfragen werden von vielen Browsern unterstützt und werden in allen modernen Browsern außer IE6-8-Browsern perfekt unterstützt. Ein weiterer Unterschied besteht in den Medien Abfragen müssen in verschiedenen Browsern nicht wie andere CSS3-Eigenschaften mit einem Präfix versehen werden.

Verwandte Empfehlungen: Über CSS-Responsive-Implementierungscode und -Effekte

So implementieren Sie Responsive-Layout mit CSS

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