add an example

Author: annevk

cssom-view/Overview.html

@@ -611,6 +611,31 @@ <h3 id=the-stylemedia-interface><span class=secno>4.1. </span>The <code
    href="#task">task</a> was <a href="#queue-a-task" title="queue a
    task">queued</a>.
 
+  <div class=example>
+   <p>A simple piece of code that detects changes in the orientation of the
+    viewport can be written as follows:</p>
+
+   <pre><code>function handleOrientationChange(landscape) {
+  if(landscape)
+    &hellip;
+  else
+    &hellip;
+}
+styleMedia.addMediumListener("(orientation:landscape)", handleOrientationChange)</code></pre>
+
+   <p>A more generic handler for media query changes could be written as
+    follows:</p>
+
+   <pre><code>function handleMediaQueryChange(query, matches) {
+  &hellip;
+}
+function addMediumListener(query) {
+  styleMedia.addMediumListener(query,
+    function(matches) { handleMediaQueryChange(query, matches) }
+  ) 
+}</code></pre>
+  </div>
+
   <h3 id=the-screen-interface><span class=secno>4.2. </span>The <code
    title="">Screen</code> Interface</h3>
 

cssom-view/Overview.src.html

@@ -454,6 +454,29 @@ <h3 id="the-stylemedia-interface">The <code title="">StyleMedia</code> Interface
   media query matches the state of the rendered <code>Document</code> at the
   time the <span>task</span> was
   <span title="queue a task">queued</span>.</p>
+  
+  <div class="example">
+   <p>A simple piece of code that detects changes in the orientation of the
+   viewport can be written as follows:</p>
+   <pre><code>function handleOrientationChange(landscape) {
+  if(landscape)
+    &hellip;
+  else
+    &hellip;
+}
+styleMedia.addMediumListener("(orientation:landscape)", handleOrientationChange)</code></pre>
+
+   <p>A more generic handler for media query changes could be written as
+   follows:</p>
+   <pre><code>function handleMediaQueryChange(query, matches) {
+  &hellip;
+}
+function addMediumListener(query) {
+  styleMedia.addMediumListener(query,
+    function(matches) { handleMediaQueryChange(query, matches) }
+  ) 
+}</code></pre>
+  </div>