CSS 媒體查詢
Apple iPhone SE Media Queries （僅限行動裝置）
@media only screen and (min-width: 320px) and (max-width: 767px) { /* Your Styles... */ }
Apple iPhone SE 最小寬度媒體查詢
@media only screen and (min-width: 320px) { /* Your Styles... */ }
Apple iPhone SE 最小高度媒體查詢
@media only screen and (min-height: 568px) { /* Your Styles... */ }
Apple iPhone SE 橫向媒體查詢
@media only screen and (min-width: 568px) and (orientation: landscape) { /* Your Styles... */ }
Apple iPhone SE 縱向媒體查詢
@media only screen and (min-width: 320px) and (orientation: portrait) { /* Your Styles... */ }
Apple iPhone SE Retina 媒體查詢
@media
only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and ( min--moz-device-pixel-ratio: 2.0),
only screen and ( -o-min-device-pixel-ratio: 2.0/1),
only screen and ( min-device-pixel-ratio: 2.0),
only screen and ( min-resolution: 326dpi),
only screen and ( min-resolution: 2.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 */
}