로드 시간을 단축하기 위해 미디어 쿼리를 기반으로 다른 이미지를로드 할 수 있습니까?

Question

예를 들어, div가 있고 바탕 화면 크기로만 표시되는 'X'로 배경 이미지를 설정한다고 가정 해보십시오. 쿼리가 모바일로 바뀌면 백그라운드 이미지를 'Y'로 설정합니다.

모바일에서 'Y'만로드되고 'X'가로드되지 않도록할까요? 'X'는 큰 이미지이고 'Y'는 작습니다.로드 시간을 개선하려고합니다. 또한 데스크탑에서 'X'와 'Y'가로드되거나 'X'가 아닌 'Y'가로드됩니까?

Answer 1

미디어 쿼리를 기반으로 다른 배경 이미지를 설정하여이 작업을 수행 할 수 있습니다.

불행히도 이미지 태그의 출처는 자바 스크립트에서만 설정할 수 있습니다.

예 :

.container { 
    background-image: url(big.jpg); 
} 

@media all and (max-width: 699px) { 
    .container { 
    background-image: url(small.jpg); 
    } 
} 

Answer 2

당신은 서로 다른 배경을 표시 할 CSS 미디어 유형 및 화면 크기를 사용할 수 있습니다. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

예이 미디어 쿼리 당신은 예를 들어, 모든 화면 크기에 두 CSS를 만들 수 있습니다

무엇을 :

@import url("test.css") screen and (min-width: 960px); 
@import url("testmobile.css") screen and (max-width: 959px); 

또는 각 CSS 규칙에 미디어 쿼리를 추가 할 수 있습니다.

@media all and (max-width: 699px) and (min-width: 520px) { 
} 

이 link을 확인하시기 바랍니다, 당신이