미디어쿼리 적용하는 방법

미디어쿼리 페이지에 적용 방법...

CSS파일을 연결 해봅시다.

일단 각 조건별로 스타일시트 파일을 만들어서 저장한 후...

<link>태그나 @import문을 이용해서 불러오면 됩니다..

<link href="정의 된 css파일" rel ="stylesheet" type="text/css" media="미디어쿼리 조건"> 

ex)  <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen">

link말고 @import를 사용할 때....

@import url(css 파일 경로) 미디어쿼리 조건

ex) @import url("css/tablet.css") screen and (min-width:321px) and (max-width:768px);
 <!-- 화면 너비가 321이상 768이하일 경우 tablet.css문서안에 포함시켜서(import)사용-->

웹문서에서 직접 구현하기.

<style media="미디어쿼리 조건"> 스타일 규칙들 </style> 

ex)

<style media="screen and (max-width:320px)">
   body { background-color:orange }
 </style>

 이 미디어쿼리는 디바이스(각종 웹을 볼 수 있는 기기들)들 마다의 화면크기를 고려해서 보여주는 방법을 해결해주는 것이므로
각각 기기들의 해상도를 고려해야 합니다.

아이폰3GS, 아이팟 3세대	320*480
아이폰4, 아이폰4s, 아이팟터치	640*960
아이폰5	640*1136
갤럭시S3, 노트2, 옵티머스LTE	720-*1280
갤럭시 노트1,	800*1280
아이패드	768*1024
옵티머스G	768*1280

뷰포트 맞추기...
미디어쿼리를 이용해 스마트폰의 뷰포트에 맞게 설정해도... 스마트폰화면에서 확인해보면 글씨가 작게 보입니다.
그 이유는...웹키트(webkit)기반인 모바일 브라우저들의 기본 뷰포트 너비가 980px 이기 때문입니다.

이를 해결 하기 위해서는 메타(meta)태그를 이용해서 배율을 조정해야 합니다.

<meta name="viewport" content="width=device-width">

뷰포트 meta 속성

width	기본값은 device-width
height	기본값은 device-height
intial-scale	초기배율을 나타내며 기본값은 1이고, 1보다 큰값을 사용하면 확대된 페이지를 표시함.
user-scalable	사용자가 페이지를 확대,축소할 있는지의 여부를 지정...  기본값은 'yes', 'no'일경우 확대,축소 불가능...
minimum-scale	사용자가 축소할 수 있는 최소값을 지정함..기본값은 0.25이며,   가로값을 기준임
maxmum-scale	사용자가 확대할 수 있는 최대값.. 기본값은 5.0입니다.

*minimum-scale과 maximum-scale속성을 각각 1.0이라고 할때 user-scalable 을 yes라 해도 확대,축소가 안됩니다.

ex)

<meta name="vievport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0">