CSS 미디워 쿼리 설정하기

반응형 웹(Responsive Web)
디바이스 해상도에 따라 웹페이지의 크기가 자동으로 변경되는 것을 말한다.

CSS 2.1부터 미디어타입으로 단말기 종류에따라 각각 다른 스타일을 적용이 가능해졌다.

디바이스별 해상도 크기는 다음거 같다.

@media (max-width:1199px) { 
	/* Style  */
}


@media (min-width: 992px) and (max-width: 1199px) {
	/* Style - laptop*/
}

@media (max-width:991px) {

}

@media (min-width: 768px) and (max-width: 991px) {
	/* Style - Tablet*/
}

@media (max-width:767px) {
	
}

@media (min-width: 480px) and (max-width: 767px) {
	/* Style - handheld*/
}

@media (max-width: 479px) {
	/* Style - smallest*/
}


/* ----------------------------------------------------------------
	Retina CSS
-----------------------------------------------------------------*/


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	/* Style*/
}


@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (   min--moz-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (max-width: 991px),
only screen and (        min-device-pixel-ratio: 2) and (max-width: 991px),
only screen and (                min-resolution: 192dpi) and (max-width: 991px),
only screen and (                min-resolution: 2dppx) and (max-width: 991px) {
	/* Style*/
}