How to select specific viewports with media queries

I am trying to select an area between 767px, and 1024px.

I want this to apply to the screen, iPad portrait, but NOT iPad landscape.

These are some queries that I have tried with no success.

@media only screen and (max-device-width: 1024px开发者_如何转开发) and (orientation: portrait), screen and (min-width: 767px) and (max-width: 1024px) { ... }

Problem lies with the iPad landscape falls within the query of 767 and 1024, so I don't know how to exclude the iPad landscape specific viewport.

how about:

<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:landscape)" href="landscape.css" />

so then do this: so <style @media screen (max-device-width: 1024px) and (orientation:portrait){ /** portrait / } @media screen (max-device-width: 1024px) and (orientation:landscape){ / landscape **/ } </style>

i'm not sure what you mean...those do that. either way, here's another solution so you can exclude iPad Landscape /* iPads (landscape) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { / Styles */ }

/* iPads (portrait) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { / Styles */ }