Một thành phần chính của thiết kế đáp ứng là tạo ra trải nghiệm phù hợp cho thiết bị phù hợp. Với hàng triệu thiết bị khác nhau trên thị trường, đây có thể là một nhiệm vụ khó khăn. Chúng tôi đã làm tròn các truy vấn phương tiện có thể được sử dụng để nhắm mục tiêu thiết kế cho nhiều thiết bị tiêu chuẩn và phổ biến, điều này chắc chắn đáng để đọc
Nếu bạn đang tìm kiếm một danh sách đầy đủ các truy vấn phương tiện, thì kho lưu trữ này là một nguồn tài nguyên tốt
Nếu bạn phản ứng với điều này là. bạn không bao giờ nên đặt điểm ngắt của mình trên thiết bị. Bạn có một điểm tốt. Justin Avery có một bài viết hay về những cạm bẫy có thể xảy ra khi sử dụng các điểm dừng dành riêng cho thiết bị. Chọn điểm dừng dựa trên thiết kế của bạn chứ không phải thiết bị cụ thể là một cách thông minh để thực hiện. Nhưng đôi khi bạn chỉ cần một chút trợ giúp để kiểm soát một tình huống cụ thể
Điện thoại và thiết bị cầm tay
iPhone/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and [min-device-width: 320px]
and [max-device-width: 480px]
and [-webkit-min-device-pixel-ratio: 2] {
}
/* Portrait */
@media only screen
and [min-device-width: 320px]
and [max-device-width: 480px]
and [-webkit-min-device-pixel-ratio: 2]
and [orientation: portrait] {
}
/* Landscape */
@media only screen
and [min-device-width: 320px]
and [max-device-width: 480px]
and [-webkit-min-device-pixel-ratio: 2]
and [orientation: landscape] {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
@media only screen
and [min-device-width: 320px]
and [max-device-width: 568px]
and [-webkit-min-device-pixel-ratio: 2] {
}
/* Portrait */
@media only screen
and [min-device-width: 320px]
and [max-device-width: 568px]
and [-webkit-min-device-pixel-ratio: 2]
and [orientation: portrait] {
}
/* Landscape */
@media only screen
and [min-device-width: 320px]
and [max-device-width: 568px]
and [-webkit-min-device-pixel-ratio: 2]
and [orientation: landscape] {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and [min-device-width: 375px]
and [max-device-width: 667px]
and [-webkit-min-device-pixel-ratio: 2] {
}
/* Portrait */
@media only screen
and [min-device-width: 375px]
and [max-device-width: 667px]
and [-webkit-min-device-pixel-ratio: 2]
and [orientation: portrait] {
}
/* Landscape */
@media only screen
and [min-device-width: 375px]
and [max-device-width: 667px]
and [-webkit-min-device-pixel-ratio: 2]
and [orientation: landscape] {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and [min-device-width: 414px]
and [max-device-width: 736px]
and [-webkit-min-device-pixel-ratio: 3] {
}
/* Portrait */
@media only screen
and [min-device-width: 414px]
and [max-device-width: 736px]
and [-webkit-min-device-pixel-ratio: 3]
and [orientation: portrait] {
}
/* Landscape */
@media only screen
and [min-device-width: 414px]
and [max-device-width: 736px]
and [-webkit-min-device-pixel-ratio: 3]
and [orientation: landscape] {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and [min-device-width: 375px]
and [max-device-width: 812px]
and [-webkit-min-device-pixel-ratio: 3] {
}
/* Portrait */
@media only screen
and [min-device-width: 375px]
and [max-device-width: 812px]
and [-webkit-min-device-pixel-ratio: 3]
and [orientation: portrait] {
}
/* Landscape */
@media only screen
and [min-device-width: 375px]
and [max-device-width: 812px]
and [-webkit-min-device-pixel-ratio: 3]
and [orientation: landscape] {
}
Galaxy Phones/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 2] {
}
/* Portrait */
@media screen
and [device-width: 320px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 2]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 320px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 2]
and [orientation: landscape] {
}
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 320px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3] {
}
/* Portrait */
@media screen
and [device-width: 320px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 320px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: landscape] {
}
/* ----------- Galaxy S6 ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 4] {
}
/* Portrait */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 4]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 4]
and [orientation: landscape] {
}
HTC Phones/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3] {
}
/* Portrait */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: landscape] {
}
Google Pixel/* ----------- Google Pixel ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3] {
}
/* Portrait */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: landscape] {
}
/* ----------- Google Pixel XL ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 4] {
}
/* Portrait */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 4]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 360px]
and [device-height: 640px]
and [-webkit-device-pixel-ratio: 4]
and [orientation: landscape] {
}
Nexus Phones/* ----------- Nexus 4 ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 384px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 2] {
}
/* Portrait */
@media screen
and [device-width: 384px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 2]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 384px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 2]
and [orientation: landscape] {
}
/* ----------- Nexus 5 ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 3] {
}
/* Portrait */
@media screen
and [device-width: 360px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 360px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 3]
and [orientation: landscape] {
}
/* ----------- Nexus 6 and 6P ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 360px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 4] {
}
/* Portrait */
@media screen
and [device-width: 360px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 4]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 360px]
and [device-height: 592px]
and [-webkit-device-pixel-ratio: 4]
and [orientation: landscape] {
}
Windows Phone/* ----------- Windows Phone ----------- */
/* Portrait and Landscape */
@media screen
and [device-width: 480px]
and [device-height: 800px] {
}
/* Portrait */
@media screen
and [device-width: 480px]
and [device-height: 800px]
and [orientation: portrait] {
}
/* Landscape */
@media screen
and [device-width: 480px]
and [device-height: 800px]
and [orientation: landscape] {
}
máy tính xách tay
Truy vấn phương tiện cho máy tính xách tay hơi phức tạp. Thay vì nhắm mục tiêu các thiết bị cụ thể, hãy thử chỉ định phạm vi kích thước màn hình chung, sau đó phân biệt giữa màn hình có võng mạc và không có võng mạc