본문 바로가기

web/JQTouch

jQTouch media Queries


CSS3 Media Queries
View more presentations from Russ Weakley.
다른곳을 아무리 둘러봐도 위에처럼 설명 잘해놓은곳이 없네. 
간단히 말해 media queries 는 화면의 비율을 기준으로 어떤 화면의 스타일을 결정할수 있다.
모바일상에서는 이렇게~ 컴퓨터 상에서는 저렇게 화면을 구성할수 있는것이다. 

간단하게 기기 별로 화면이 변하는 것을 만들어 보았다.
먼저 jsp
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="MQtest1.css" media="only screen  and (min-device-width:320px) and (max-device-width:480px) ">
<link rel="stylesheet" href="MQtest2.css" media="only screen  and (min-width:768px) and (max-width:1024px) ">
  
<title>Media Queries test</title>
</head>

<body>
<div>
     test<br>
     test<br>
     test<br>
     test<br>
        
    </div>
</body>
</html>

<link> 태그를 보면은 두개의 css를 참조하고 있다. 차이점은 해당하는 기기와 싸이즈이다.
위의 MQtest1.css는 일반 아이팟,아이폰 싸이즈에서 반응하도록 싸이즈 조정을 했다.
(max-device-width 요것만으로도 아이팟,아이폰에서 작동하도록 되어 있다.)
두번째 MQtest2.css는 일반 스크린에서(컴퓨터 화면에서 ) 반응하도록 만들었다.

MQtest1.css
@charset "utf-8";
div
{
width:100%;
height:auto;
font-size:24px;
border:1px solid #0000FF;
background-color:#ff0000;
}

MQtest2.css
@charset "utf-8";
div
{
width:100%;
height:auto;
font-size:12px;
border:1px solid #0000FF;
background-color:#F90;
}

css차이점은 색상과 글자 폰트라는것을 볼수 있다.

아래가 일반 브라우져에서 본 화면

아래는 아이팟에서 본 화면이다.

똑같은 jsp파일을 보더라도 css파일을 다르게 참조하여 화면 구성을 다르게 할수 있다는것을 볼수 있다.


- 일반 브라우져에서 반응하려면 가로 싸이즈가 768~1024 사이여야만 반응합니다.

기기별 media queries 정의 링크 : http://firejune.com/1633