Targeting the new iPad mini with CSS definitely isn't as difficult as it could have been. Apple thankfully made things easy on developers and gave the iPad mini the same resolution as the iPad 1 and 2.
As for the device-pixel-ratio of the iPad mini, I was informed by Daring Fireball's John Gruber that this also remains the same as the iPad 1 & 2.
This means it's really easy for developers to target all iPads with very little code, but it also means there's no way to specifically target an iPad mini with pure CSS. In other words, nothing is new, and you might want to make your text a tiny bit bigger.
iPad mini in portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad mini in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad mini in portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
iPad mini Resolution
Screen Width = 768px (CSS Pixels) Screen Height = 1024px (CSS Pixels) Screen Width = 768px (Actual Pixels) Screen Height = 1024px (Actual Pixels) Device-pixel-ratio: 1
