[CSS3] 반응형 웹 미디어 쿼리 (@ media)

CSS파일은 순서대로 적용되므로 미디어쿼리는 css파일 제일 하단에 위치해야 합니다. 

또한 html에 반응형 뷰포트도 써줘야합니다.

 

@media (max-width:1024px){
 //브라우저 크기가 1024이하일 때
 //태블릿 또는 노트북
}
@media (max-width:768px){
 //브라우저크기가 768이하일 때 
 //태블릿 또는 스마트폰
}
@media (max-width:320px){
 //브라우저 크기가 320이하일 때
}
=================================
@media (min-width:320px){
 //브라우저 크기가 320 이상일 때
 // 스마트폰 또는 태블릿
}
@media (min-width:768px){
 //브라우저 크기가 768 이상일 때
 //태블릿 또는 노트북
}
@media (min-width:1024px){
 //브라우저 크기가 1024 이상일 때
 //데스크탑
}