반응형 웹을 위한 css (rem , media, %, viewport)

1. rem과 em을 사용한다.

rem은 body태그 속성값을 기준으로 설정

em은 부모 태그 속성값을 기준으로 설정.

1.5rem이면 body font-size: 10px일 경우 15px이 됨.

 

2.미디어쿼리를 작성

@media screen and (min-width:0px) and (max-width:500px){

 

}

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

 

}

과 같이 웹브라우저의 길이에 따라서 뿌려주는 방식을 구분.

 

external 방식으로 사용하는 방법

<link rel="stylesheet" media="(min-width:0px) and (max-width:500px)" href=path />

<link rel="stylesheet" media="(min-width:501px)" href=path />

 

3. px대신 %사용

웹브라우저 가로 길이에 꽉차게 해주려면 width:100%로 사용.

 

4.<meta name="viewport" content="width=device-width" />

 

viewport를 사용해서 모바일폰의 실제 해상도에 맞춰주는 방법.

웹브라우저가 인식하는 해상도와 폰의 해상도가 다를 경우 맞춰주는 효과를 가짐.