레티나 대응 responsive 이미지 img태그로, 미디어 쿼리 작업 디바이스 해상도

http://www.mattstow.com/experiment/responsive-images/responsive-images.html

img 태그를 쓰고, img태그에는 spacer 이미지(공백)로 width,height 를 인라인으로 입력하고

속성에 img{background에서 이미지를 호출, background-size:contain;height:auto;max-width:100% }

img 태그에서 width값에 맞게 이미지가 자동으로 변경되며, 미디어 쿼리 사용함에도 해당 디바이스별로 백그라운드 이미지만 교체해줘도 된다.

갤노트등 hd해상도의 안드로이드 단말기때매 미디어쿼리로 추가작업이 들어가게 생겼다.

http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

/* 리퀘스트로 성능저하 우려 */

or

css내에 바로 입력

@media all and (max-width:480px) { .h2{color:#ff0000} }

근데, 아이폰4가 픽셀레이티오가 2로 아는데, 1.5이상도 적용이 되긴 하니까 저렇게 쓴건가. 안드로이드가 1.5고

갤노트나 옵뷰등은 픽셀레티오가 2쯤되는건가 아니면 세로해상도를 720이상으로 잡아서 해봐야되나, 우선 단말기가 들어와야 테스트를 해보지 싶다.

이런걸 쭈욱 모아논 위키가 또있네.ㅎㅎ
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density