сетка

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

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

Свойство grid CSS параметр среды можно использовать для проверки, использует ли устройство вывода экран на основе сетки.

Большинство современных компьютеров и смартфонов имеют экраны на основе растровой графики. Примерами устройств с сетчатыми экранами являются текстовые терминалы и простые телефоны с единственным фиксированным шрифтом.

Синтаксис

Функция grid задаётся как значение <mq-boolean> (0 или 1), обозначающее, является ли устройство вывода сетчатым.

Примеры

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 # сетка

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

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

См. также

© 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/grid