Media queries - targeting specific devices together

问题

I've got a devices stylesheet that is loaded to deal with responsive design in a website, but I'm struggling to group a couple different media queries exactly how I want.

I've got a shared set of styles for a small web window, a mobile device at any rotation and an iPad in portrait only.

At the moment I'm getting everything except the iPad with this query:

@media all and (max-device-width: 480px), all and (max-width: 480px)

I'm getting the iPad in portrait with this code:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)

How do I combine these two media queries?

回答1:

Okay, for anyone with this problem.

To achieve this I ended up using the media queries to load the stylesheet, rather than embedding the media query in my stylesheet.

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" />
<link rel="stylesheet" type="text/css" media="@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" />

来源：https://stackoverflow.com/questions/16392429/media-queries-targeting-specific-devices-together