2011-07-27 3 views
0

우리가 iPad 특정 웹 사이트를 만들 때 (데스크톱 사용자를 위해 다른 웹 사이트를 만들 때) 초상화 및 가로 모드 용으로 다른 CSS를 작성하려고 할 때 어떤 방법을 선호합니까?iPad 용 Portrait 및 Landscape 모드에서 CSS를 별도로 유지하는 방법이 무엇입니까?

우리는 하나 개의 HTTP 요청에

<link href="style.css" rel="stylesheet" type="text/css" media="all" /> 

을 하나의 CSS 파일을 유지하고 미디어 쿼리를 사용할 수 있습니다

첫 번째 방법은 내부에 별도의

/* CSS for landscape here */ 

#wrapper {width:1024px} 

/* CSS for portrait here */ 

@media only screen and (orientation:portrait){ 
#wrapper {width:768px} 
} 

두 번째 방법을 코드를 유지하기 위해

우리는 당신이 알려주세요 개선하기 위해 어떤 제안이있는 경우 당신이 선호하고 할 방법이 HTTP 요청

<!--CSS for landscape--> 
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"> 

<!--CSS for portrait--> 
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"> 

2 개 CSS 파일을 사용할 수 있습니다.

참고 : 첫 번째 방법에서 * 이 더 나은 너무 풍경을 지정하는 것입니다하거나 필요는 없습니다 : 나는 정제에 대해 별도의 웹 사이트를 만들고 있어요, 그것은 데스크탑 및 모바일

편집 2 아니다. *

는 첫 번째 방법 코드

/* CSS for landscape here */ 

@media only screen and (orientation:landscape){ 
#wrapper {width:1024} 
} 

/* CSS for portrait here */ 

@media only screen and (orientation:portrait){ 
#wrapper {width:768px} 
} 

와 비교해 그것은 CSS 링크에서 style="text/css"을 제거하기 위해 확인인가?

<link href="style.css" rel="stylesheet" media="all" /> 

그리고 링크 media="all" 유지해야하거나 할 필요가 없습니다입니까?

답변

4

전체 CSS가 첫 번째 요청에서 캐시되기 때문에 첫 번째 선호합니다. 두 번째 버전에서는 다른 모드의 CSS를 다운로드해야하므로 화면 방향 변경이 첫 번째 모드와 같이 부드럽 지 않습니다.

+0

첫 번째 방법을 올바르게 사용하고 있습니까? '@media only screen and (orientation : portrait) {}'가로 CSS에 이것을 지정하지 않으면 문제가되지 않는다고 생각합니다. 나는 디폴트가 항상 풍경에 있다고 생각한다. –

+0

iPad 용으로 개발 한 적이 없으므로 귀하의 의견에 정말로 답변 할 수 없습니다. 내 대답은 그러나 어떤 플랫폼 (안드로이드뿐만 아니라)에 유효합니다. –

+0

+1 확인. 귀하의 제안에 감사드립니다. 캐싱에 당신이 옳습니다. –

0

저는 모든 것을 한 곳에서 가지고 있기 때문에 첫 번째 방법을 선호합니다. style="text/css"의 필요성에 관해서는 적어도 HTML5 doctype을 가지고있을 필요는 없지만 이것이 최선의 방법으로 남아 있다고 생각합니다. media="all"도 마찬가지입니다.

관련 문제