title: @media query device - how to portrait one css, landscape other?
body: <p>How can I add two different @media query css stylesheets for a device. </p>
  
  <p>So that when you have it in portrait it actives one
  And when in landscape it activates another.</p>
  
  <hr>
  
  <p>My case:</p>
  
  <p>I am trying to create a page that only works in landscape (1024px), so when you have your device (In my case Ipad) in portrait (768px) it activates a css that tells you to turn your screen sideways/landscape.</p>
  
  <p>I tried this:</p>
  
  <pre><code>&lt;link rel="stylesheet" media="@media only screen and (max-device-width : 1024px) and (orientation : landscape)" href="css/tabphone.css" /&gt;
  &lt;link rel="stylesheet" media="@media only screen and (max-device-width : 768px) and (orientation : portrait)" href="css/turn.css" /&gt;
  </code></pre>
  
  <p>But then it only activates the last one of them.</p>
  
  <p>Anybody know a way to solve my problem :-) ?</p>