CSS3 Media Queries
간단히 말해 media queries 는 화면의 비율을 기준으로 어떤 화면의 스타일을 결정할수 있다.
View more presentations from Russ Weakley.
다른곳을 아무리 둘러봐도 위에처럼 설명 잘해놓은곳이 없네.
모바일상에서는 이렇게~ 컴퓨터 상에서는 저렇게 화면을 구성할수 있는것이다.
간단하게 기기 별로 화면이 변하는 것을 만들어 보았다.
먼저 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 사이여야만 반응합니다.
소스참조 링크 : 네이버카페 웹앱을 만드는 사람들의 모임
'web > JQTouch' 카테고리의 다른 글
| jQTouch 페이지 전환 효과! (0) | 2010.12.07 |
|---|---|
| jQTouch viewport 에 대하여.. (0) | 2010.12.06 |
| jQTouch 혹시 한글이 안된다면! (2) | 2010.12.05 |
| jQTouch 화면전환 애니메이션. (0) | 2010.11.30 |
| jqtouch -_-신기한 UI세계로~ 설정부터~ (0) | 2010.11.27 |
