Медиафункция CSS `grid`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Медиафункцию grid CSS медиафункцию можно использовать, чтобы проверить, использует ли устройство вывода экран на основе сетки.

В большинстве современных компьютеров и смартфонов используются растровые экраны. К устройствам с экранами на основе сетки относятся, например, текстовые терминалы и простые телефоны, в которых используется только один фиксированный шрифт.

Синтаксис

Медиафункция grid задаётся значением, указывающим, использует ли устройство вывода сетку: 1, если использует, и 0, если нет.

Примеры

HTML

<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>

CSS

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}

Результат

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

Спецификация
Медиа-запросы уровня 4 # grid

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`grid`	1	12	2	10	3	18	4	10.1	1	1.0	4.4	1

См. также

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