HTML5와 CSS3를 이용한 멀티 디바이스 지원: @media quary for Smart phones
- 다양한 크기의 스마트폰의 보급으로 화면 사이즈에 대한 UI를 고려 한다면
CSS의 media query를 이용하여 구현을 할 수 있다.
가로 일때 세로일때 화면 사이즈가 폰일때, 패드일때 하나의 웹 페이지로 지원을 할수 있게 된다.
@media all and (orientation:portrait) {
img {
max-width:(device-width);
max-height:(device-height);
min-width:(device-width*0.5);
min-height:(device-width * 0.5);
overflow : auto;
}
@media all and (orientation:landscape) {
img {
max-width:(device-width);
max-height:(device-width);
min-width:(device-width*0.5);
min-height:(device-width*0.5);
overflow : auto;
}
아이폰 아이패드를 위해서 다음과 같이 확장 가능하다.
[참고] http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html
Here are the new links, showing the updated CSS Media Queries:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and
(max-device-width: 1024px) and (orientation:portrait)"
href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and
(max-device-width: 1024px) and (orientation:landscape)"
href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
좀더 종합적으로 아래와 같이 작성 가능하다.
[참고] http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
ㅠ
@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 */
}
Of course, you might not want all your responsive design styles
inside one huge stylesheet. If that’s the case, you can serve
alternative stylesheets using the same queries as attributes on your
link elements.
<head>
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
</head>
'DevOps' 카테고리의 다른 글
| Java의 유형 종속성, 2-1 (Collections API, 제네릭, 람다식 활용) (0) | 2017.06.14 |
|---|---|
| Java에서 유형 종속성, Part 1-2 (array, generic, wildcard) (0) | 2017.06.14 |
| Java에서 유형 종속성, Part 1-1 (array, generic, wildcard) (0) | 2017.06.14 |
| Memcached를 이용한 php - 설치와 예제 (0) | 2014.03.07 |
| Python + Django + Oracle (0) | 2009.11.12 |
| java + python 연결 [ jython ] Accessing Jython from Java Without Using jythonc (0) | 2009.11.12 |
| RapidWebDevelopmentByDjango :“장고(Django)”로 쉽고 빠른 웹 개발 (0) | 2009.11.12 |