CSS 媒體查詢
Samsung Galaxy S6 Media Queries （僅限行動裝置）
@media only screen and (min-width: 360px) and (max-width: 767px) { /* Your Styles... */ }
Samsung Galaxy S6 最小寬度媒體查詢
@media only screen and (min-width: 360px) { /* Your Styles... */ }
Samsung Galaxy S6 最小高度媒體查詢
@media only screen and (min-height: 640px) { /* Your Styles... */ }
Samsung Galaxy S6 橫向媒體查詢
@media only screen and (min-width: 640px) and (orientation: landscape) { /* Your Styles... */ }
Samsung Galaxy S6 縱向媒體查詢
@media only screen and (min-width: 360px) and (orientation: portrait) { /* Your Styles... */ }
Samsung Galaxy S6 裝置寬度媒體查詢
@media only screen and (min-device-width: 360px) and (orientation: portrait) { /* Your Styles... */ }
@media only screen and (min-device-width: 640px) and (orientation: landscape) { /* Your Styles... */ }
Samsung Galaxy S6 Retina 媒體查詢
@media
only screen and (-webkit-min-device-pixel-ratio: 4.0),
only screen and ( min--moz-device-pixel-ratio: 4.0),
only screen and ( -o-min-device-pixel-ratio: 4.0/1),
only screen and ( min-device-pixel-ratio: 4.0),
only screen and ( min-resolution: 577dpi),
only screen and ( min-resolution: 4.0dppx) {
/* Retina styles here */
}
Retina 實際上以裝置像素比為基礎。大多數裝置具有 2x 或 3x 顯示，因此可使用通用 Retina 媒體查詢在各種裝置上顯示高解析度內容。以下為 Retina 2x 及 Retina 3x 媒體查詢：
Retina 2x 媒體查詢
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina styles here */
}
Retina 3x 媒體查詢
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and ( min--moz-device-pixel-ratio: 3),
only screen and ( -o-min-device-pixel-ratio: 3/1),
only screen and ( min-device-pixel-ratio: 3),
only screen and ( min-resolution: 384dpi),
only screen and ( min-resolution: 3dppx) {
/* Retina styles here */
}