반응형 웹디자인

 

반응형 그리드를 위한 TEXT 처리 방안

 

웹페이지의 Body 엘리먼트의 기본 font-size 를 16px 이라고 했을시

 

적용할 폰트 사이즈 24 px 이라하게 되면

 

24 (변환할 대상) ÷ 16 (변환할 대상의 부모) = 1.5 (결과) 가 된다.

 

target ÷ context = result

 

반응형 이미지를 위해서는 max-width: 이미지 사이즈로 작성이 가능합니다.

 

단. internet exploer 의 8이하의 버전에서는 max-width 에 대해 적용이 되지 않을수 있으므로

width 로 작업해야 할수도 있습니다.

 

미디어 쿼리의 경우 미디어 타입에서 발전된것으로 기기의 사이즈를 정해서 해당 기기에 맞춰서

보여질수 있도록 하는 css 부분입니다.

예로

@media screen and (max-width:520px){

}

@media screen and (max-width:768px){

}

@media screen and (min-width:1200px){

}

또한 미디어 쿼리는 link 테그와 import 구문에 붙이는 것도 가능합니다.

<link rel="stylesheet" href="test.css" media="screen and (min-width:1024px)" />

@import url("test.css") screen and (min-width:1024px);

 

 

구버전의 브라우저에서 미디어 쿼리를 지원하지 않는 문제를 고칠수 있는 수많은 자바스크립트 기반의

해결 방법이 있습니다.

css3-mediaqueries.js 라는 파일이며 대부분의 하위 브라우저에서 호환이 되도록 하는 스크립트 입니다.

해당 파일은 아래의 url 에서 다운 가능합니다.

http://code.google.com/p/css3-mediaqueries-js/

 

또한 respond.js 라는 스크립트는 구버전 브라우저에서 min-width 와 max-width 가 지원되도록 해줍니다.

이 스크립트는 미디어 쿼리의 끝에 특수한 형태의 css 주석을 추가하여

css hack 에 의존하여 빠른 효과를 거둘수 있습니다.

@media screen and (min-width:1200px){

}/*/mediaquery*/

 

 

미디어 쿼리에 테스트해 볼수 있는 함수 목록은 아래의 url 에서 확인 가능합니다.

http://www.w3.org/TR/css3-mediaqueries/#media1

 

반응형 웹사이트의 예시 사이트

http://responsivewebdesign.com/robot/