프로그래밍 풍경

Question

내가 부모 구성 요소가 클릭에 아이 컴퍼넌트

부모 구성 요소에서 렌더링 모달를 표시하는 버튼을 표시 곳 반응 - 유성의 부모 구성 요소 및 하위 구성 요소가 오전에 내 모달의 방향을 변경하는 방법

........... <child component /> ..........
하위 구성 요소는 다음과 같은 : : 내 프로젝트에

<Modal 
    header='Modal Header' 
    trigger={<Button>OR ME!</Button>}> 
    <p>Lorem </p> 
</Modal> 

모든 화면 페이지에 있어야 다음과 같이 보입니다 내 모달을 제외하고는 오토 모드. 모달에서 flowplayer를 사용하여 동영상을 재생하고 있습니다. 모바일 버전의 경우 모달을 열면 곧바로 '가로 모드'로 전환되기를 원합니다. 내 모달이 열리 자마자 내 웹 앱이 가로 모드로 바뀌고 모달이 닫히면 'potrait'모드로 돌아 간다. window.screen.orientation.lock과 window.screen.lockOrientation(orientation) 을 사용해 보았습니다. 둘 다 작동하지 않으며 CSS를 사용하여 시도한 적이 있습니다. transform: rotate(0.25turn) 그러나 모달 크기를 조정할 때 이것을 사용하면 height:100vw(width here)width:100vh(height here) 모달이 오른쪽 상단으로 번역되고 일부분으로 이동합니다. 화면 아래로 이동합니다. 어떻게 해결할 수 있을까요?

Answer 1

나는 문제를 해결 한 transform-origin CSS 속성을 사용했습니다. 여러 차원에서 효과가있는 변환 원점에 대한 뷰 포트 단위 (vh 및 vw)를 사용했습니다 (반응 형).