resolution
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2022å¹´9æ.
resolution 㯠CSS ã®ã¡ãã£ã¢ç¹æ§ã§ãåºå端æ«ã®ãã¯ã»ã«è§£ååº¦ãæ¤æ»ããããã«ä½¿ç¨ãããã¨ãã§ãã¾ãã
æ§æ
resolution ç¹æ§ã¯ãåºå端æ«ã®ãã¯ã»ã«è§£å度ã表ã <resolution> å¤ã¨ãã¦æå®ãã¾ããããã¯ç¯å²ã®ç¹æ§ã§ãããã¤ã¾ãæ¥é è¾ã®ä»ãã min-resolution ããã³ max-resolution ã®å¤åå½¢ã使ç¨ãã¦ãããããæå°å¤ã¨æå¤§å¤ãã¯ã¨ãªã¼ãããã¨ãã§ãã¾ãã
ä¾
>HTML
html
<p>ããã¯ãã使ãã®ç«¯æ«ã®ãã¯ã»ã«å¯åº¦ãæ¤æ»ãããã®ã§ãã</p>
CSS
css
/* åä½ `dpi` ã«ããæ£ç¢ºãªè§£å度 */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* å義èªã§ãã `dppx` ããã³ `x` ã«ããæå°è§£å度 */
@media (min-resolution: 2dppx) {
p {
text-decoration: underline;
}
}
@media (min-resolution: 2x) {
p {
text-decoration: underline;
}
}
/* åä½ `dpcm` ã«ããæå¤§è§£å度 */
@media (max-resolution: 2dpcm) {
p {
background: yellow;
}
}
çµæ
仿§æ¸
| Specification |
|---|
| Media Queries Level 4> # resolution> |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
window.devicePixelRatioimage-resolutionããããã£