форма

Экспериментально: Это экспериментальная технология
Перед использованием в продуктовой среде внимательно ознакомьтесь со таблицей совместимости с браузерами.

С помощью shape CSS функции среды можно проверить форму устройства, чтобы различать прямоугольные и круглые дисплеи.

Синтаксис

Дискретная функция shape задаётся как одна из двух допустимых строк: rect для прямоугольного экрана или round для круглого, овального или эллиптического экрана.

rect: Форма — это прямоугольник или квадрат с выровненными осями, или подобная форма, например, с закругленными углами, для которой подходят традиционные дизайны.
round: Форма — это закруглённая форма или подобная кругу форма, например, овал или эллипс, для которых подходят отличительно округлые дизайны.

Примеры

Базовый пример

HTML

<h1>Hello World!</h1>

CSS

h1 {
  text-align: left;
}

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

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

Пользовательский стилевой лист

Этот 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>

Спецификации

Спецификация
CSS Round Display Уровень 1 # shape-media-feature

Совместимость с браузерами

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/shape