常见平板电脑尺寸的CSS媒体查询

Question

I was hoping someone either with a few different tablets to test on, or with vast theoretical understanding could tell me if my query to target common tablet sizes ( taken from: http://nmsdvid.com/snippets/ ) would work.

My main point of question is if the operators (specifically for the targeting one of 4 different devices) are correct;

@media only screen and (
    ((min-device-width : 768px) and (max-device-width : 1024px)),
    ((min-device-width : 600px) and (max-device-width : 1024px)),
    ((min-device-width : 800px) and (max-device-width : 1080px)),
    ((min-device-width : 800px) and (max-device-width : 1280px))
) and (orientation : landscape) {

    body{ background-color: pink; }

}

Answer 1

Unfortunately, there is no answer to your question. Just because there is no answer to the question "common tablet sizes". You will find old laptops narrower than current tablets and tablets with wider resolution as netbooks.

Look into my database of media features and try for the best.

That said, Lokase answer is the best. Do not try to target devices, try to make your website nice in all resolutions. It is not that complicated.

Answer 2

The best approach I have found is to use a Device Agnostic Responsive Layout approach.

Set the media queries for a range (ie - dimensions that would cover all the tablets you are targeting) and then use a fluid approach to expand or contract the UI to the dimensions of the device.

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

There are so many devices coming on the market everyday, its a losing battle to try and specifically target each and everyone.