Update @media/resolution index.md (mdn#33596)

* Update @media/resolution index.md Add examples for additional resolution unit, dppx, x and dpcm, similar to mdn#31902 * Merging examples Removed new values and changed two of the three existing dpi values to different resolution units instead. * Update files/en-us/web/css/@media/resolution/index.md --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Estelle Weyl <[email protected]>
evelinabe · Jun 11, 2024 · a18eaa8 · a18eaa8
1 parent 90d9f81
commit a18eaa8
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/files/en-us/web/css/@media/resolution/index.md b/files/en-us/web/css/@media/resolution/index.md
@@ -24,22 +24,28 @@ The `resolution` feature is specified as a {{cssxref("&lt;resolution&gt;")}} val
 ### CSS
 
 ```css
-/* Exact resolution */
+/* Exact resolution with unit `dpi` */
 @media (resolution: 150dpi) {
   p {
     color: red;
   }
 }
 
-/* Minimum resolution */
-@media (min-resolution: 72dpi) {
+/* Minimum resolution synonym units: `dppx` and `x` */
+@media (min-resolution: 2dppx) {
   p {
     text-decoration: underline;
   }
 }
 
-/* Maximum resolution */
-@media (max-resolution: 300dpi) {
+@media (min-resolution: 2x) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* Maximum resolution with unit `dpcm` */
+@media (max-resolution: 2dpcm) {
   p {
     background: yellow;
   }