resolution
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
構文
resolution
特性は、出力端末のピクセル解像度を表す <resolution>
値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-resolution
および max-resolution
の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。
例
HTML
html
<p>This is a test of your device's pixel density.</p>
CSS
css
/* 正確な解像度 */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* 最小解像度 */
@media (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}
/* 最大解像度 */
@media (max-resolution: 300dpi) {
p {
background: yellow;
}
}
結果
仕様書
Specification |
---|
Media Queries Level 4 # resolution |
ブラウザーの互換性
BCD tables only load in the browser