미디어쿼리는 반응형 웹을 제작할때 사용하는 매우 유용한 구문이다.



1. 사용법

- 속성으로 구분

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

{

.className{color:#000;}

}

- 파일로 구분

<link reel="stylesheet" href="mobile.css" media="screen and (max-width:768px)" />


2. 미디어 특징

- width : 화면 너비

@media only screen and (min-width:768px) and (max-width:1024px) {} // 너비가 768px 이상이고 1024px이하일때 적용

- height : 화면 높이


- aspect-ratio : 화면 가로세로 비율

@media only screen and (aspect-ratio: 3/4) {} //  가로세로 비율이 3 : 4 일때 적용

- device-width : 출력장치 너비


- device-height : 출력장치 높이


- device-aspect-ratio : 출력장치 가로세로 비율


- orientation : 화면이 가로모드인지 세로모드인지

 @media only screen and (orientation : landscape) {} // 화면이 가로모드 일때 적용

 @media only screen and (orientation : portrait) {} // 화면이 세로모드 일때 적용

예) 아이패드 전용 css

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (device-aspect-ratio:3/4) 

{

css 구문..

}


3. 모바일 기기별 해상도 참고 사이트


http://screensiz.es/phone

http://iosres.com/



'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

안드로이드 킷캣 4.4.2 웹뷰 css  (0) 2018.06.07
페이스북 공유하기  (0) 2018.05.24
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09

+ Recent posts