grid
CSS
media feature
can be used to test whether the output device uses a grid-based screen.
Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.
grid
feature is specified as a
<mq-boolean>
值 (
0
or
1
) representing whether or not the ouput device is grid-based.
<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>
: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;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 4
The definition of 'grid' in that specification. |
候选推荐 | 无变化。 |
|
Media Queries
The definition of 'grid' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
grid
media feature
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 2 | IE 完整支持 10 | Opera 完整支持 10 | Safari 完整支持 3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持