CSS @MEDIA 쿼리 예제 및 설명

미디어쿼리를 사용하게 되면 스마트폰이나 해상도의 화면에 따라서 css 를 처리할 수 있습니다.

PC 또는 태블릿의경우 1200px 값이 많으므로 그 이상일경우 실행되는경우에는 min 값을 사용한다.
아래 예제에서 min-width: 1200px 값인경우 1200px 이상 일경우 실행되게 된다.

min :  해당 값 보다 클경우 실행
max :  해당 값 보다 작을경우 실행

아래 두개의 예를 보면 응용할 수 있습니다.

@media (min-width: 1200px) {
 

// 너비 width 가 1200px 이상일경우 실행 

}

@media (max-width: 1199px) {
 

// 1200px 보다 작은 1199px 이므로 최대값이 1199px 보다 적을경우 실행

// 1199px 이하 값 일경우
 

}

@media (max-width: 1024px) {

}

@media (max-width: 768px) {

}

@media (max-width: 533px) {

}

@media (max-width: 414px) {

}

@media (max-width: 384px) {

}