모바일 페이지 가로,세로 모드에 따라 다른 css 파일 적용시키기

모바일 웹 페이지 작성시 가로로 볼때와 세로로 볼때처럼 보여지는 방향에 따라 문서에

다른 css 파일을 적용시킬수 있습니다.

 

파일두개를 만들어야 하는 단점도 있지만 나름 효과적인 방법일 수 있습니다.

 

pc 에서 해당 페이지를 로딩할 경우 기본적으로  가로모드 css 파일이 적용됩니다.

<!-- 세로모드일때 적용될 CSS -->

<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css" /> 
 

<!-- 가로모드일때 적용될 CSS -->
<link rel="stylesheet" media="all and (orientation: landscape) "href="landscape.css" />

 

portrait.css

body{background-color: black;}
p{font-size: 20pt;color: white;}
#cont{width:900px;border:1px solid #ddd;}
 

landscape.css

body{background-color: red;}
p{font-size: 20pt;}
#cont{width:200px;border:1px solid #ccc;}