1. 사용자가 장치를 회전하면 장치는 장치가 가로 또는 세로 모드에 있음을 응용 프로그램에 알리기 위해 이벤트 알림 응용 프로그램을 보냅니다.
2. 대부분의 경우 장치가 가로 방향일 때 애플리케이션은 레이아웃을 조정합니다.
3. 애플리케이션은 더 넓은 화면에 더 많은 콘텐츠가 표시될 수 있도록 이 이벤트를 기반으로 화면 콘텐츠를 표시하는 방법을 결정할 수 있습니다.
1. Bootstrap, Foundation 및 Semantic UI 등과 같은 일부 프레임워크를 사용할 수 있습니다. 이러한 프레임워크에는 이미 화면에 적응하는 CSS 클래스가 포함되어 있습니다.
2. 당신이 해야 할 일은 화면 방향에 자동으로 적응하도록 이러한 클래스를 응용 프로그램에 적용하는 것뿐입니다.
3. @media 규칙을 사용하여 다양한 CSS 규칙을 정의하여 다양한 화면 방향으로 다양한 스타일을 표시할 수 있습니다.
1. 장치가 가로 모드인 경우 @media 규칙을 정의하여 더 넓은 레이아웃을 설정할 수 있습니다.
2. 그리고 모든 콘텐츠가 화면에 맞도록 일부 요소를 숨깁니다.
3. 물론 어떤 경우에는 수평 및 수직 화면 회전을 구현하기 위해 JavaScript를 사용해야 할 수도 있습니다.
1. JavaScript를 사용하여 장치 회전 이벤트를 수신하고 장치 방향에 따라 레이아웃을 다시 계산하고 조정할 수 있습니다.
2. JavaScript를 사용하여 수평 및 수직 화면 회전을 구현하면 성능이 저하되고 애플리케이션이 지연될 수 있습니다.
3. 자바스크립트를 사용할 때는 최대한 가벼운 방법을 사용하여 회전을 최대한 구현해야 합니다.