미디어 쿼리 – 화면, 인쇄 등등 제어

반응형 미디어 쿼리

@media screen and (min-width: 990px) { 
	 // 가로 값이 990이상 일때
}
 

@media screen and (max-width : 990px) { 
 	 // 가로 값이 990이하 일때
}

@media only screen and (max-device-width:990px) {
	 // Device width가 990이하 일때 (여기서는 모바일 기기일 때를 지칭함)
}

기타

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	// 레티나 디스플레이 등 고해상도 기기일 때
}
 
@media only screen and (min-resolution: 300dpi) {
	// 화면 해상도 기준으로
}

CSS파일 링크시 설정

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

읽을거리 : http://alistapart.com/article/responsive-web-design

---

인쇄용 미디어 쿼리

참고 : http://www.tutorialspoint.com/css/css_paged_media.htm
(추후 정리)

인쇄시 페이지 기본 마진 없애기

@page {
    margin: 0;
    mso-header-margin:0; 
    mso-footer-margin:0; 
    mso-paper-source:0;
}