Programming language/HTML & CSS
note 8 viewport
hello-world
2018. 12. 13. 18:57
728x90
반응형
device width : 414px
device height : 846px
해상도 1440 * 2960
CSS media query
@media only screen and (min-width: 414px) { /* Your Styles... */ }
- mobile only
@media only screen and (min-width: 414px) and (max-width: 767px) { /* Your Styles... */ }
- Retina styles
@media
only screen and (-webkit-min-device-pixel-ratio: 3.5),
only screen and ( min--moz-device-pixel-ratio: 3.5),
only screen and ( -o-min-device-pixel-ratio: 3.5/1),
only screen and ( min-device-pixel-ratio: 3.5),
only screen and ( min-resolution: 521dpi),
only screen and ( min-resolution: 3.5dppx) {
/* Retina styles here */
}
- 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 */
}
728x90
반응형