뷰포트에 해당하는 글 1

반응형 viewport 및 해상도별 css

뷰포트




해상도별 CSS (출처 : https://goo.gl/v5Lktq )


/* 스마트폰 (가로 및 세로) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 사용자 코드 */
}

/* 스마트폰 (가로 ) ----------- */
@media only screen and (min-width : 321px) {
/* 사용자 코드 */
}

/* 스마트폰 (세로) ----------- */
@media only screen and (max-width : 320px) {
/* 사용자 코드 */
}

/* 아이패드 (가로 및 세로) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 사용자 코드 */
}

/* 아이패드 (가로) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이패드 (세로) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* PC 및 노트북 ----------- */
@media only screen and (min-width : 1224px) {
/* 사용자 코드 */
}

/* 대형 스크린 ----------- */
@media only screen and (min-width : 1824px) {
/* 사용자 코드 */
}

/* 아이폰 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* 사용자 코드 */
}

/* 아이폰 5 & 5S 가로 및 세로 */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* 사용자 코드 */
}

/* 아이폰 5 & 5S 가로 ------ */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이폰 5 & 5S 세로 ------ */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* 아이폰 6 세로 및 가로 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
/* 사용자 코드 */
}

/* 아이폰 6 가로 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이폰 6 세로 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* 아이폰 6 Plus 가로 및 세로 */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* 사용자 코드 */
}

/* 아이폰 6 Plus 가로 */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
/* 사용자 코드 */
}

/* 아이폰 6 Plus 세로 */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
/* 사용자 코드 */
}

/* 아이패드 미니 가로 및 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {
/* 사용자 코드 */
}

/* 아이패드 미니 가로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {
/* 사용자 코드 */
}

/* 아이패드 미니 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {
/* 사용자 코드 */
}


'취미생활 > 혼자삽질기' 카테고리의 다른 글

plex movie feed  (0) 2018.12.29
코드이그나이터 RSS파싱 라이브러리  (0) 2018.12.27
반응형 viewport 및 해상도별 css  (0) 2018.12.26
codeigniter index.php 제거하기  (0) 2018.12.24
mysql 사용자에게 테이블 권한주기  (0) 2018.12.24
CSS reset  (0) 2018.12.21

댓글(0)