So verwenden Sie CSS3, um horizontale und vertikale Bildschirme anzupassen

Dieser Artikel stellt hauptsächlich eine einfache Methode zur Verwendung von CSS3 zum Anpassen horizontaler und vertikaler Bildschirme vor. Er verwendet hauptsächlich das neu hinzugefügte @media in CSS3

Geschrieben am Gleichzeitig in einem CSS

@media screen and (orientation: portrait) {   
  /*竖屏 css*/  
}    
@media screen and (orientation: landscape) {   
  /*横屏 css*/  
}

separat in 2 CSSs geschrieben
Vertikaler Bildschirm

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

Horizontaler Bildschirm

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Anwendungsorte

(1) Der Inhalt mobiler WEB-Seitenelemente wird im Allgemeinen durch Prozentsätze definiert, sodass sie auf Geräten mit unterschiedlichen Auflösungen normal angezeigt werden können Die Breite und Höhe der Bildschirmauflösung von Mobilgeräten ist immer noch sehr unterschiedlich. Wenn dieselbe Seite umgedreht wird, kann die Breite des durch den Prozentsatz definierten Elements sehr groß werden, wodurch die Seite an Schönheit verloren geht Matching wird verwendet. Abhängig vom umgedrehten Zustand des Bildschirms können Sie unterschiedliche CSS schreiben, um den Seitenstil zu steuern.

(2) Für mobile WEB-Seiten mit Hintergrundbildern können Sie den Bildschirmstatus entsprechend der Ausrichtung anpassen und unterschiedliche Hintergründe festlegen.

(3) Ein leicht technischer Punkt: Einige WEB-Seiten mit absolut positionierten Elementen positionieren ein Element am unteren Rand der Seite. Wenn sich der Bildschirm im Hochformat befindet, kann dies daran liegen, dass die Gesamtseitenlänge kürzer ist Die Bildschirmhöhe (Aber größer als die Bildschirmbreite) ist es richtig, das absolut positionierte Element unten zu positionieren. Wenn der Bildschirm jedoch ins Querformat gedreht wird, ist die Höhe des Seiteninhalts größer als die Bildschirmhöhe (d. h. die Bildschirmbreite vor dem Umdrehen), wird das absolut positionierte Element den Seiteninhalt verdecken, was zu Problemen auf der Seite führt. In diesem Fall können Sie die Ausrichtung verwenden, um den Bildschirmstatus anzupassen und den CSS-Code anzupassen.

Informationen zum Anpassen des horizontalen und vertikalen Bildschirmstatus können Sie auch über JS beurteilen. Onorientationchange in JS ist ein Fensterereignis, und Sie können den horizontalen und vertikalen Bildschirm anpassen, indem Sie sich das Ereignis anhören.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS3 und jQuery implementieren den Hover-Effekt, der der Mausrichtung folgt

CSS-Tabellenlayoutattribut Verwendung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um horizontale und vertikale Bildschirme anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!