Heim > Artikel > Web-Frontend > Beispielanalyse für ein responsives CSS3media-Layout

Beispielanalyse für ein responsives CSS3media-Layout

高洛峰Original: 2017-03-07 15:27:561856Durchsuche

Responsives Layout kann Benutzern auf verschiedenen Endgeräten eine komfortablere Benutzeroberfläche und ein besseres Benutzererlebnis bieten. Angesichts der aktuellen Beliebtheit von Mobilgeräten mit großem Bildschirm ist es keine Übertreibung, es als „allgemeinen Trend“ zu bezeichnen. Da immer mehr Designer diese Technologie übernehmen, sehen wir nicht nur viele Innovationen, sondern auch einige etablierte Muster. Mit der Entwicklung der Technologie wurden auch viele seiner neuen Tags sehr einfach zu verwenden und zu erlernen, ebenso wie das responsive Layout von CSS3 Ursprünglich nur auf PCs angezeigt. Jetzt können Sie eine Webseite responsive machen, indem Sie @media hinzufügen. Sie kann auf PC oder Mobilgeräten verwendet werden und ist beispielsweise wirklich skalierbar
Die Wirkung dieses Codes

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   

    </style>
    <body>
        <p id="p">小于200px背景变红色大于300px背景为黄色</p>
    </body>
</html>

@media kann für Einzelbedingungen oder Doppelbedingungen verwendet werden, zum Beispiel:

Beispielanalyse für ein responsives CSS3media-Layout

Dieser Absatz Wenn der Code kleiner als 200 Pixel oder größer als 500 Pixel ist, wird der Effekt nicht angezeigt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media (min-width:200px ) and (max-width:500px ) {   
            #p{   
                background: red;   
            }   
        }   
    </style>
    <body>
        <p id="p">200px以上并且500px以下背景变成红色</p>
    </body>
</html>

Ein einfaches @media kann eine responsive Seite realisieren

A Die Seite, die ich zufällig erstellt habe, liegt über 450 Pixel.

Dies ist der Seiteneffekt unter 450 Pixel.

Der allgemeine Ansatz besteht darin, jedes p auf unter 450 px zu verkleinern, wenn die Breite jedes p 100 beträgt %

Beispielanalyse für ein responsives CSS3media-Layout Beim Schreiben dieser Webseite ist ein kleines Problem aufgetreten. Als ich das Ende der Seite erreichte, flog es nicht friedlich nach unten In der Mitte möchte ich einen kleinen Wissenspunkt nennen. Ich muss dem p unten nur einen klaren Stil geben: beides, damit der Boden sicher am Boden befestigt wird Es werden horizontale und vertikale Bildschirmantworten im Medienformat angezeigt. Der vertikale Bildschirm ist @media (Ausrichtung: Hochformat)

Der vertikale Bildschirm ist @media (Ausrichtung: Querformat), sodass er sich sowohl an horizontale als auch an horizontale Bildschirme anpassen kann Vertikale Bildschirme haben viele Vorteile. Wenn wir beispielsweise unseren Lebenslauf erstellen, sind unsere Chancen viel größer, dass er Ihren Lebenslauf zu diesem Zeitpunkt sieht Komm ruhig zu dir Beispielanalyse für ein responsives CSS3media-Layout

Das obige CSS3media-Responsive-Layout-Beispiel ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie die chinesische PHP-Website unterstützen.

Weitere Beispielanalysen für ein responsives CSS3media-Layout und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

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

Vorheriger Artikel：Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS3Nächster Artikel：Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS3

In Verbindung stehende Artikel

Mehr sehen