메뉴 건너뛰기

검색창 닫기

HEUKMYO

Mobile

해상도 CSS3 media 쿼리로 브라우져 해상도별 지원

2013.08.06 17:12 read.71

CSS3 media 쿼리로 브라우져 해상도별 지원하기 http://bit.ly/9ePwcj 를 한번 참고해보세요

[출처] 모바일 사이즈요 문의드립니다. (하드코딩하는사람들) |작성자 minran1979

참고사이트 - http://www.timbenniks.nl/ (사파리, 크롬등에서 브라우저 넓이 조절해 보세요)

CSS 작성으로 제어하는 경우

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* 이부분에 해당 조건의 css를 작성 */}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* 이부분에 해당 조건의 css를 작성 */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* 이부분에 해당 조건의 css를 작성 */
}


link에서 해당 css를 불러와 제어하는 경우

<head>

<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">

</head>

추가메뉴 목록
위로