분류 css

CSS Media query를 이용한 반응형 사이트 만들기

컨텐츠 정보

  • 조회 1,900 (작성일 )

본문

CSS 프레임웤인 부트스트랩이나 파운데이션같은 것을 이용하면 쉽게 반응형 사이트를 만들 수 있습니다.

이런 프레임웍을 사용하지 않고 순수 CSS Media query를 이용한 반응형 사이트를 만들어야 할 때도 있습니다.

 

아래는 쉽고 간단하게 미디어커리를 이용하는 방법 3가지 입니다.

1. CSS화일에 @import 매소드를 이용한 방법

2. 하나의 CSS화일을 이용하는 방법

3. CSS를 링크하는 방법

 

1. CSS화일에 @import 매소드를 이용한 방법​

​@import url(style320.css) screen and (min-width: 320px);

@import url(style544.css) screen and (min-width: 544px);

@import url(style768.css) screen and (min-width: 768px);

@import url(style992.css) screen and (min-width: 992px);

@import url(style1200.css) screen and (min-width: 1200px);​ 

 

2. 하나의 CSS화일을 이용하는 방법​

 

<style type="text/css">

/* CSS code except media */

 

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

/* 320px device css */

}

 

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

/* 320px device css */

}

 

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

/* 768px device css */

}

 

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

/* 992px device css */

}

 

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

/* 1200px device css */

}

</style>​ 

 

3. CSS를 링크하는 방법​

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="style320.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 544px)" href="style544.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style768.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 992px)" href="style992.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1200px)" href="style1200.css" />​ 

 

 

 

css