모바일 웹 앱 : 여러 해상도 장치에서 동일한 이미지 세트 사용

Question

모바일 웹 앱용 단일 CSS 파일을 유지 관리 할 수 ​​있는지 알고 싶습니다. 웹 앱은 다양한 Android 기기 해상도를 목표로합니다. 그래서 나는 각 이미지 세트를 사용하고 각 해상도마다 여러 이미지를 유지하는 대신 모든 CSS 스타일을 사용하여 축소 할 수 있는지 알고 싶습니다. webapp는 html5, css3 및 javascript를 사용하여 작성됩니다.

나는 우리가 css 미디어 쿼리를 사용할 수 있지만 그걸 통해 장치 너비에 따라 다른 이미지를로드해야한다는 것을 알고 있습니다. 장치의 모든 해상도에 동일한 이미지를 사용하려고합니다. 코드에서 전체적으로 고해상도 이미지를 유지하면됩니다.

이것이 가능합니까? 저에게 알려주세요.

미리 감사드립니다. 모든 종류의 도움을 이해하십시오.

Answer 1

당신은 같은 것을 수행 할 수 있습니다

@media screen and (max-width: 480px){ 
    .element { background-image: url(../images/bg1.img); } 
} 

@media screen and (min-width: 800px){ 
.element { background-image: url(../images/bg2.img); } 
} 

을하지만