title: Why "only screen" in responsive css media queries?
body: <p>I have noticed that almost all tutorials on css media queries for responsive websites suggest using something like the following:</p>
  
  <pre><code>@media only screen and (max-width: 700px){
  
  }
  </code></pre>
  
  <p>Although I understand that the "only screen" part makes it only appear on devices with a screen, I fail to understand why that would be desirable.  If the media query makes the site look better on screens smaller than 700px, wouldn't it also be good to have it apply when printing to paper smaller than 700px?</p>
  
  <p>Is their something risky (or not browser supported) about doing the following instead?</p>
  
  <pre><code>@media all and (max-width: 700px){
  
  }
  </code></pre>