grid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das grid CSS Medienmerkmal kann verwendet werden, um zu testen, ob das Ausgabegerät einen rasterbasierten Bildschirm verwendet.
Die meisten modernen Computer und Smartphones haben bitmap-basierte Bildschirme. Beispiele für rasterbasierte Geräte sind textbasierte Terminals und einfache Telefone mit nur einem festen Schriftfont.
Syntax
Das grid-Feature wird als ein <mq-boolean> Wert (0 oder 1) angegeben, der angibt, ob das Ausgabegerät rasterbasiert ist oder nicht.
Beispiele
HTML
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
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;
}
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Media Queries Level 4 # grid |