티스토리 뷰

DEVELOPE/반응형웹

반응형 웹 미디어쿼리

소찾나 2017. 10. 27. 22:25
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

반응형 웹 미디어쿼리

반응형 웹 미디어쿼리

반응형 웹 미디어쿼리


미디어 쿼리(Media Queries)는  새로운 기술이 아니다. 이미 오래전에 미디어 타입 이라는 이름으로 선을 보인적이 있다. 미디어 타입은 


미디어 종류만 감지하기때문에 세부적인 사항은 감지할 수 없었다. css3 가 등장하면서 미디어 타입이 미디어 쿼리라고 바뀌면서 기기


의 종류뿐 아니라 해상도, 비트수, 가로, 세로 여부등 세세한 부분까지 감지할 수 있는 기술이 탑재 되었다.



반응형 웹 미디어쿼리




3 미디어 쿼리의 기본문법


[only 또는 not] @media [미디어유형] [and 또는 ,콤마] [조건문] {실행문}


and 는 앞뒤 조건이 모두 사실일때 뒤에 따라오는 것을 해석하라는 의미입니다. ,콤마는 앞뒤 조건 중 하나만 사실이어도 뒤에 따라오는 


것을 해석하라는 의미입니다.   and 와 , 콤마는 생략가능




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
  /* 가로  너비가 320 픽셀에서 480픽셀일때 이곧에 있는 스타일시트를 해석하라는 의미 */
/* Styles */ 
} 
/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 
/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 
/* Tablets, iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 
/* Tablets, iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
}
/* Tablets, iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 
/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 
/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
}
 
cs



조건문 

설명 

조건값 

min/max 사용 여부

 width

 웹페이지 가로 너비

 width 속성에서 사용할 수 있는 모든 속성값

 사용함

 height

 웹페이지 세로 높이

 device-width

 기기의 가로너비

 device-height

 기기의 세로높이

 orientation

 기기의 화면방향

 portrait(세로)

 landscape(가로)

 사용않함

 aspect-ratio

 화면비율

 브라우저 화면비율(1)

 브라우저 종횡비(16/9)

 브라우저 해상도(1280/720)

 사용함

 device-aspect-ratio

 단말기의 화면비율

 기기 화면 비율(1)

 기기 종횡비(16/9)

 기기 해상도(640/320)

 color

 기기의 비트수

 8bit 단위

 color-index

 기기의 색상수

 128 색상수 단위

 monochrome

 기기의 흑백일때 픽샐당 비트수

 1bit 단위

 resolution

 기기의 해상력

 300dpi

 scan

 TV 스캔방식

 progressive/interlace

 사용않함

 grid

 기기의 그리드/비트맵

 0(비트맵 방식)/1(그리드방식)


이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^

'DEVELOPE > 반응형웹' 카테고리의 다른 글

반응형 달력(캘린더) 소스포함 Responsive Calendar  (0) 2018.07.03
반응형 웹 만들기 #1  (0) 2017.10.27
반응형 웹 무엇인가? 장점 및 만들기  (0) 2017.10.27
미디어쿼리 스크린 사이즈  (1) 2017.02.14
공유하기 링크
댓글