0
저는 몇 가지 버전의 사이트가 있습니다. 큰 화면에는 슬라이드 쇼가 있고 휴대 전화 및 기타 작은 화면에는 스크롤 스루 사이트 만 있습니다. 이 두 버전의 사이트는 다른 그래픽을로드합니다.화면 크기에 따라 다양한 망막 그래픽을로드하십시오
저는 조건부로 망막 그래픽을로드하는 방법에 대해 의문을 제기했습니다. 슬라이드 쇼용 스크린이있는 망막 장치의 첫 번째 망막 그래픽을로드해야하지만, 전화기를 사용하는 경우 첫 번째 세트를로드해서는 안되며 두 번째 망막 그래픽 세트는 스크롤 - 스루 사이트에 사용되는 제 2 세트의 이미지. 내가 트리거와 망막에 정상 그래픽을 대체하려면이 옵션을 사용하고
:
내 미디어 쿼리의 시작 부분의 바탕 화면 사이트의 이미지를 대체@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
. 그런 다음 레이아웃 조정에 대한 몇 가지 섹션을 준비했습니다.
@media all and (min-width: 1024px) and (max-width: 1099px){
@media all and (min-width: 768px) and (max-width: 1023px) {
@media all and (max-width: 767px) {
// This query is for the small phone sized layout.
@media all and (max-width: 767px) and ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) {
마지막 쿼리는 전화 사이트에 대해서만 망막 이미지를 바꾸려는 나의 시도입니다. 이것은 작동하지 않으며 내가 시도한 방법이 효과가 없습니다.
아이디어가 있으십니까?
감사
나는이 예에 대한 jQuery 플러그인을 사용하는 것이 좋습니다 것입니다