shape

Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

DieshapeCSS Medienfunktion kann verwendet werden, um die Form des Geräts zu testen, um zwischen rechteckigen und runden Bildschirmen zu unterscheiden.

Syntax

Die diskreteshape-Eigenschaft wird als einer von zwei akzeptablen Zeichenfolgen angegeben: entwederrect, das einen rechteckigen Bildschirm darstellt, oderround, das einen kreisförmigen, ovalen oder elliptischen Bildschirm repräsentiert.

rect: Die Form ist ein achsenausgerichtetes Rechteck oder Quadrat oder eine ähnliche Form wie ein abgerundetes Rechteck, für das traditionelle Designs geeignet sind.
round: Die Form ist abgerundet oder ähnelt einem Kreis, wie ein Oval oder eine Ellipse, für die charakteristisch abgerundete Designs geeignet sind.

Beispiele

Einfaches Beispiel

HTML

html

<h1>Hello World!</h1>

CSS

css

h1 {  text-align: left;}@media (shape: rect) {  h1 {    text-align: left;  }}@media (shape: round) {  h1 {    text-align: center;  }}

Benutzerdefiniertes Stylesheet

Dieses HTML wird ein spezielles Stylesheet für Geräte mit runden Bildschirmen anwenden.

html

<head>  <link rel="stylesheet" href="default.css" />  <link    media="screen and (shape: rect)"    rel="stylesheet"    href="rectangle.css" />  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /></head>