CSS3를 사용하여 가로 및 세로 화면을 일치시키는 방법

이 글에서는 CSS3를 이용해 가로, 세로 화면을 맞추는 간단한 방법을 주로 소개합니다. CSS3에 새로 추가된 @media를 주로 사용합니다. 필요하신 분들은 참고하시면 됩니다.

같은 CSS로 작성

@media screen and (orientation: portrait) {   
  /*竖屏 css*/  
}    
@media screen and (orientation: landscape) {   
  /*横屏 css*/  
}

작성. CSS 2개에 별도로
세로화면

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

가로화면

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

적용처

(1) 모바일 WEB 페이지 요소 내용은 일반적으로 다양한 해상도로 표시될 수 있도록 백분율로 정의됩니다. 그럼에도 불구하고 모바일 기기의 화면 해상도 너비와 높이는 여전히 매우 다릅니다. 화면에서 동일한 페이지를 넘기면 백분율로 정의되는 요소의 너비가 매우 커질 수 있습니다. 이런 식으로 화면의 뒤집기 상태를 일치시키기 위해 방향을 사용하면 다른 CSS를 작성하여 페이지 스타일을 제어할 수 있습니다.

(2) 배경 이미지가 있는 모바일 WEB 페이지의 경우 방향에 따라 화면 상태를 일치시키고 다양한 배경을 설정할 수 있습니다.

(3) 약간 기술적인 점: 요소가 절대 위치에 있는 일부 웹 페이지는 화면이 세로 모드일 때 페이지의 전체 길이가 화면보다 짧기 때문에 요소를 페이지 하단에 배치합니다. 높이(그러나 화면 너비보다 큼)의 경우 절대 위치 요소를 아래쪽에 배치하는 것이 옳습니다. 그러나 화면을 가로로 뒤집으면 페이지 콘텐츠의 높이가 화면 높이보다 크기 때문입니다. (즉, 뒤집기 전 화면 너비) 절대 위치에 있는 요소가 위의 페이지 내용을 덮게 되어 페이지에 문제가 발생합니다. 이 경우 방향을 사용하여 화면 상태를 일치시키고 CSS 코드를 조정할 수 있습니다.

가로 및 세로 화면 상태 일치에 관해서는 JS를 통해서도 판단할 수 있습니다. JS의 Onorientationchange는 창의 이벤트이며, 이 이벤트를 듣고 가로 및 세로 화면 상태를 일치시킬 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS3 및 jQuery는 마우스 방향을 따르는 호버 효과를 구현합니다.

CSS

위 내용은 CSS3를 사용하여 가로 및 세로 화면을 일치시키는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!