모바일 기기별 화면 사이즈

해상도 아니고, 보이는 화면 사이즈 임.

아이폰3 & 3GS	320*480
아이폰4 & 4Sv	320*480
아이폰5	320*568
뉴 아이패드	768*1024
아이패드2 & 1 & 미니	768*1024
갤럭시S3	320*640
갤럭시S2 HD	360*640
갤럭시S2 & 갤럭시S	480*800
갤럭시S2	320*533
갤럭시노트	400*640

 

width / height : 뷰포트의 너비와 높이

@media all and (min-width:768px) and (max-width:1024px){ ... } // 뷰포트 너비가 768px 이상 '그

리고' 1024px 이하이면 실행
@media all and (width:768px), (width:1024px){ ...} // 뷰포트 너비가 768px 이거나 '또는' 1024px

이면 실행
@media not all and (min-width:768px) and (max-width:1024px){ ...} // 뷰포트 너비가 768px 이상

'그리고' 1024px 이하가 '아니면' 실행

 device-width / device-height : 스크린의 너비와 높이

orientation : 세로모드인지 가로모드인지 판단
@media all and (orientation:portrait) {...}
@media all and (orientation:landscape) {...}

aspect-ratio : 뷰포트의 너비와 높이에 대한 비율
@media all and (device-aspect-ratio:5/4){ … } // 스크린 너비가 5, 높이가 4 비율이면 실행
@media all and (min-device-aspect-ratio:5/4){ … } // 스크린 너비가 5/4 비율 이상이면 실행
@media all and (max-device-aspect-ratio:5/4){ … } // 스크린 너비가 5/4 비율 이하면 실행

반응형웹 제작시 고려사항
color : 출력장치 색상 비트수

resolution : 출력장치의 해상력
@media all and (resolution:96dpi){ … } // 1인치당 96개의 사각형 화소를 제공하면 실행
@media all and (min-resolution:96dpi){ … } // 1인치당 96개 이상의 화소를 제공하면 실행
@media all and (max-resolution:96dpi){ … } // 1인치당 96개 이하의 화소를 제공하면 실행

아이폰 320*480 = 1.5
아이폰5 320*568 = 1.7
갤럭시S2 320*533 = 1.6
갤럭시S3 320*640 = 2, 2/1
갤러시S2 HD 360*640 = 1.7
갤럭시노트 400*640 = 1.6
갤럭시S2&갤럭시S 480*800 = 1.6
아이패드 768*1024 = 1.3

 

.pr {

    background-image: url(300by300size.png);

    background-repeat: no-repeat;

    background-size: 300px;

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {

    .pr {

        background-size: 200px;

    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 320dpi) {

    .pr {

        background-size: 150px;

    }

}
 

이미지 한벌로 하는 방법이고요. 이미지를 여러벌로 나눌 수도 있어요.

 

레티나의 경우 x2, 갤럭시등의 안드로이드 계열에는 x1.5  비율이 생겨서