title: What is the difference between "screen" and "only screen" in media queries?
body: <p>What is the difference between <code>screen</code> and <code>only screen</code> in media queries?</p>
  
  <pre><code>&lt;link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /&gt;
  &lt;link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /&gt;
  </code></pre>
  
  <p>Why are we required to use <code>only screen</code>? Does <code>screen</code> not itself provide enough information to be rendered <strong>only</strong> for screen? </p>
  
  <p>I've seen many responsive websites using any of these three different ways:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media screen and (max-width:632px)
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>@media (max-width:632px)
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>@media only screen and (max-width:632px)
  </code></pre>