CSS 혜린양욱 블로그용 미디어쿼리 템플릿

혜린블로그 이미지 가로넓이 아이폰6s 기준 템플릿. landscape는 가로모드에서 portrait는 세로모드에서 사용한다. 데스크톱, 모바일 가로, 세로 모드로 작성함.

데스크톱 모드 : 스크린을 대상 미디어로 하고 화면의 최소 너비가 937픽셀이면 실행시킨다.
모바일 가로모드 : 스크린을 대상 미디어로 하고, 가로모드가 뷰포트의 너비가 높이에 비해 길고, 화면의 최대 너비가 936픽셀이면 실행된다.
모바일 세로모드 : 스크린을 대상 미디어로 하고, 세로모드가 뷰포트의 높이가 너비에 비해 길고, 화면의 최대 너비가 749픽셀이면 실행된다.

1234567891011121314// 데스크톱 모드 
@media screen and (min-width: 937px) { 
    img { width: 847px; } // 모든 이미지 태그의 너비는 847픽셀로 한다.
}

// 모바일 가로모드 
@media screen and (orientation: landscape) and (max-width:936px) {
    img { width: 630px; } // 모든 이미지 태그의 너비는 630픽셀로 한다.
}

// 모바일 세로모드 
@media screen and (orientation: portrait) and (max-width:749px) { 
    img { width: 348px; } // 모든 이미지 태그의 너비는 348픽셀로 한다.
}