2012년 3월 29일 목요일

가로 사이즈에 반응하는 웹페이지...

최근에 여차저차 하여 미디어쿼리라는 이야기를 많이 듣게 되었는데...
CSS만으로도 브라우저, 해상도를 커버할 수 있는 반응형 웹사이트 라고 한다.
그래서 나도 한 번 해볼까? 하는 생각으로 코드를 봤는데...

기본적인 것은....
아!!!!! 쉽다...

기본적으로 일단 웹브라우저의 가로 사이즈에 따라 2단 변신을 통해 살짝 해상도 낮은 기기들을 지원 할 수 있는 버전을 제작해 봤다...

http://www.ranktoy.com/

1> 지원 대상 : IE 6,7,8을 뺀 나머지는 대충 되는 듯..
2> 테스트 방법 : 브라우저의 가로 크기가 850 pixel이하가 되면... 오른쪽 레이아웃이 아래로 뚝 떨어져 바닥에 붙는다.
3> 이를 통한 장점 : 모바일 사용자들도 대충 글씨를 읽을 수 있게 된다.
4> 미처 못한 것 : 650pixel 이하의 기기들의 호환규격도 맞춰주려 했으나 그러기에는 수정할 것이 많아서 그냥 대충 보시라... 버전으로 제작.

한 번 테스트 해보시라...

PS. 미디어 쿼리를 쓸 때에는 저해상도용 CSS 조건을 먼저 쓰는 것이 IE호환성을 위해 좋다고 하나 아직 회사에만 IE가 있어 테스트는 못함...


-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

댓글 없음:

댓글 쓰기