Truy vấn phương tiện cho độ phân giải tối thiểu của máy tính bảng và độ phân giải tối đa

Question

Hiện đang làm việc trên trang web thiết kế đáp ứng. Tôi sử dụng truy vấn phương tiện để nhắm mục tiêu các thiết bị khác nhau dựa trên độ phân giải màn hình và chiều rộng.

1. Tôi có kịch bản muốn sử dụng độ phân giải màn hình để nhắm mục tiêu thiết bị nhưng tôi không hiểu cách hoạt động của thiết bị.

2. Tôi muốn kiểm tra cả chiều rộng tối thiểu và chiều rộng tối đa, với độ phân giải màn hình cũng có thể dao động từ 97dpi đến độ phân giải tối đa ipad 264dpi. Nhưng điều này dường như không hoạt động. Nếu tôi cung cấp cho một độ phân giải duy nhất min-width: 155dpi cho hp nạp máy tính bảng nó hoạt động. Nhưng điều kiện độ phân giải tối thiểu đến tối đa dường như không hoạt động. Các bạn có thể chia sẻ ý tưởng của mình không.

Đối với điều này tôi đã sử dụng như mã dưới đây

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

Answer 1

Truy vấn resolution phương tiện truyền thông doesn't have good support in webkit browsers yet vì vậy bạn có thể có nhiều thành công sử dụng device-pixel-ratio để thay thế.

http://bjango.com/articles/min-device-pixel-ratio/

Vì vậy, chúng ta có thể xác định lại truy vấn phương tiện truyền thông của bạn sử dụng resolution cho những trình duyệt mà hiểu nó (Firefox, IE9 +, Opera), và device-pixel-ratio cho tất cả mọi thứ webkit (Chrome, Safari, iOS và Android):

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px), 
     only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {} 

Answer 2

những MQS sẽ xử lý các thiết lập cài sẵn trong trình giả lập Windows8.1:

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768), 
    screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768), 
    screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080), 
    screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: red !important; 
    } 
} 

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) { 
    body { 
    background-color: violet !important; 
    } 
} 

@media screen and (max-resolution: 174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: purple !important; 
    } 
} 

Answer 3

Ac cording để đo lường cũ bởi Quircksmode http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) { 
} 

Tuy nhiên, điều này không làm việc tốt nhất cho máy tính bảng mới hơn tôi đoán, vì điện thoại của tôi có 37em trở lên.

gì về:

@media screen and (min-width: 42em) { 
}