우리가 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"
유지해야하거나 할 필요가 없습니다입니까?
첫 번째 방법을 올바르게 사용하고 있습니까? '@media only screen and (orientation : portrait) {}'가로 CSS에 이것을 지정하지 않으면 문제가되지 않는다고 생각합니다. 나는 디폴트가 항상 풍경에 있다고 생각한다. –
iPad 용으로 개발 한 적이 없으므로 귀하의 의견에 정말로 답변 할 수 없습니다. 내 대답은 그러나 어떤 플랫폼 (안드로이드뿐만 아니라)에 유효합니다. –
+1 확인. 귀하의 제안에 감사드립니다. 캐싱에 당신이 옳습니다. –