오리엔테이션 변경시 다른 미디어를로드하는 모범 사례

Question

저는이 주제에 대해 인터넷 검색을 많이 해왔으며 도움이되는 정보는 찾을 수 없었습니다.

디자인 팀에서 설계 한 디자인을 기반으로 모바일 웹 사이트를 만드는 작업을 맡았습니다. 그들이 직면 한 기능 중 하나는 기기의 방향에 따라 서로 다른 이미지 버전을 사용하는 것입니다. 그래서 그들은 당신과 함께이 작업을 수행 할 각 이미지의 두 가지 버전이 있습니다

image1Portrait.jpg 
image1Landscape.jpg 

나는 본질적으로 스프라이트 - 에스크 될 하나 개의 이미지로 두 이미지를 결합 생각했다. onorientationchange 이벤트가 발생하면 CSS를 변경하면 이미지가 본질적으로 이동하여 올바른 버전으로 표시됩니다.

다른 옵션은 가로 이미지 버전의 이미지 원본을 바꾸는 것입니다. 나는 당신이 그것을 기다릴 필요가 있기 때문에 이것을 선호하지 않는다.

제 질문은 이것입니다. 이런 종류의 일을하는 모범 사례가 있습니까? 내가 말했듯이, 나는 인터넷 검색을 해왔지만 도움이되는 어떤 것도 발견하지 못했다.

Answer 1

미디어 쿼리이 필요한 무엇 :

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 

/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
}