망막 디스플레이 미디어 질문이 CSS에 적용

정상 1440 픽셀에서 웹 응용 프로그램을 만들었습니다. 이제 사양별로, 망막 디스플레이 2880px로 변환해야합니다. 나는 이미 그것을 계승했다. 그것의 가장 쉬운 방법은 무엇입니까? 나는 이런 것을 시도했다.망막 디스플레이 미디어 질문이 CSS에 적용

@media only screen and (min-width : 2800px){ 
body.checkout-cart-index input#s_method_flatrate { 
    width: 22px; 
    height: 12px; 
} 
}

그러나 나는 이제 망막이 다른 것을 알게되었다. 그래서 https://css-tricks.com/snippets/css/retina-display-media-query/이 쿼리를 시도했지만 지금까지 도움이되지 못했습니다. 아마도 내가 잘못 사용하고 있을까요?

출처

2017-10-25 Pro-Web

도움이되지 않았습니까?

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and ( min--moz-device-pixel-ratio: 2), 
only screen and ( -o-min-device-pixel-ratio: 2/1), 
only screen and (  min-device-pixel-ratio: 2), 
only screen and (    min-resolution: 192dpi), 
only screen and (    min-resolution: 2dppx) { 

    /* Retina-specific stuff here */ 

}

출처

2017-10-25 08:39:46 Georgy

모든 이미지를 두 배로 변경하고 요소 간격을 두 배로 변경하고 싶습니다. 그래서 나는이 쿼리에서 보통 1440 픽셀을 이미지 폭으로 두 배로 쓸 것인가? –

이 쿼리에 쓰는 경우, 예를 들어'.image {width : 22px; height : 12px}', 그러면 망막 디스플레이에'.image'가 두배의 크기가됩니다. – Georgy

내 높이와 너비가 1440 body.checkout-cart-index 입력 # s_method_flatrate { 너비 : 22px; 신장 : 12px; }는 다음과 같습니다. 그래서 .image {width : 42px; 높이 24px;}? 왜 당신은 동일한 CSS를 썼는가? 그것이 두 배가 될 것인가? –

망막 디스플레이 미디어 질문이 CSS에 적용

답변

관련 문제