title: using @media queries in CSS for desktop and phone
body: <p>I am developing a website which will be responsive in that different CSS styles are applied depending on the width of the users' browser.</p>
  
  <p>the method chosen was to use CSS media queries.</p>
  
  <p>my problem is this: when I use the following code</p>
  
  <pre><code>@media screen
  and (min-width: 200px)
  and (max-width: 800px)
  {
      #example
      {
          background: purple;
      }
  }
  </code></pre>
  
  <p>this works when I resize the window on my PC, but is not recognised by my phone whose resolution is within the limits.</p>
  
  <p>perhaps more perculiarly, when I use the following code</p>
  
  <pre><code>@media screen
  and (min-device-width: 200px)
  and (max-device-width: 800px)
  {
      #example
      {
          background: purple;
      }
  }
  </code></pre>
  
  <p>this has the inverse effect: displays on phone, but not on PC.</p>
  
  <p>as far as I have read there is no scope for an "OR" operator for something along the lines of the following to be valid</p>
  
  <pre><code>@media screen
  and (
          ((min-width: 200px) and (max-width: 800px))
  
          | / || / OR
  
          ((min-device-width: 200px) and (max-device-width: 800px))
      )
  {
      #example
      {
          background: purple;
      }
  }
  </code></pre>
  
  <p>so my question is this: is there a way test responsive CSS on both desktop and phone simultaneously?</p>
  
  <p>I have tried so many combinations:
  using <code>@media only screen</code>,
  using Android, Firefox and Chrome browsers on the phone, 
  but to no avail, the result is always the same.</p>
  
  <p>The only way I can think to do this at the moment is to create two separate stylesheets, one for desktop and one for phone, but this would mean updating two stylesheets every time I wanted to view changes in the browser, which is impractical and counters the idea of responsiveness.</p>
  
  <p>I looked into using the <code>orientation: landscape/portrait</code> target, but as far as I can make out this would again involve writing two sets of CSS.</p>
  
  <p>One last consideration is that the website is currently using pure CSS; so no javascript, user-agent determination nor server-side scripting at this point in time.</p>
  
  <p>This must be possible so any insights will be appreciated. I'm sure someone will have had the same problem and enlighten me.</p>