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



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' 카테고리의 다른 글

CSS 단위 em과 rem  (0) 2018.06.11
페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09

+ Recent posts