2014-06-06 2 views
0

windows operating system에서 잘 보이는 배경 이미지가 있지만 흐리게 보입니다. retina ready devices으로 늘어납니다. 이제 망막 준비 장치에서 배경을 고해상도 이미지로 바꾸고 싶습니다. 이를 구현하는 가장 좋은 방법은 무엇입니까? media queries 또는 javascript 또는 다른 것을 사용하고 있습니까?망막 준비 장치 용 배경 이미지 바꾸기

답변

1

이 같은 일반적 target high DPI (Dots Per Inch) displays 사용하여 미디어 쿼리 할 수 ​​있습니다

@media only screen and (min-device-pixel-ratio: 2) { 
    /* high-DPI stuff here */ 
} 

그냥이 비율 요건을 충족하는 것을 목표로된다는 점에 유의.

레티 나 디스플레이를 구체적으로 타겟팅하려면 미디어 쿼리를보다 구체적으로 만들기 위해 무언가를 추가해야합니다.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */ 
} 

이러한 모든 다른 타겟팅 방식이 different levels of support을 가지고, 그래서 몇 가지를 알고 유용 : 여기에 크리스 Coyier 그것을 수행 방법입니다.

이러한 조건을 충족하는 장치가 이미 여러 개있을 수 있으므로 추가 조건을 사용하여 더 구체적으로 타겟팅하여 다른 방법으로 타겟팅 할 수 있습니다.

예를 들어, 망막 아이폰 5/5S/5C 예를 들어, 당신이 사용할 수있는 대상 :

@media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) { 
    /* Retina-specific stuff here */ 
} 

@media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) { 
    /* Retina-specific stuff here */ 
} 

그러나 언제나처럼, 특정 장치를 대상으로하지 않는 것이 좋습니다를, 그것은 끝없는 작업입니다 .