Add dppx example so people can see its use (instead of -foo-device-pixel-ratio)

Author: fantasai

css3-images/Overview.html

@@ -393,8 +393,16 @@ <h2 id=resolution-units><span class=secno>2. </span> Resolution Units: the
    class=css>96dpi</code>&rsquo;. This corresponds to the default resolution
    of images displayed in CSS: see &lsquo;<a href="#image-resolution0"><code
    class=property>image-resolution</code></a>&rsquo;.
-   <!-- ====================================================================== -->
-   
+
+  <div class=example>
+   <p>The following @media rule uses Media Queries <a href="#MEDIAQ"
+    rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> to assign some special
+    style rules to devices that use two or more device pixels per CSS
+    &lsquo;<code class=css>px</code>&rsquo; unit:
+
+   <pre>@media (min-resolution: 2dppx) { ... }</pre>
+  </div>
+  <!-- ====================================================================== -->
 
   <h2 id=image><span class=secno>3. </span> Image Values: the &lt;image> type</h2>
 

css3-images/Overview.src.html

@@ -146,6 +146,13 @@ <h2 id='resolution-units'>
 	CSS ''px'', ''1dppx'' is equivalent to ''96dpi''. This corresponds to
 	the default resolution of images displayed in CSS: see 'image-resolution'.
 
+	<div class="example">
+		<p>The following @media rule uses Media Queries [[MEDIAQ]] to assign
+		some special style rules to devices that use two or more device pixels
+		per CSS ''px'' unit:
+		<pre>@media (min-resolution: 2dppx) { ... }</pre>
+	</div>
+
 <!-- ====================================================================== -->
 
 <h2 id="image">