Javascript의 div 컨테이너에 자동으로 적응
P粉806834059
P粉806834059 2023-09-13 19:20:46
0
1
522

다양한 크기의 div가 있습니다. 다음과 같은 차원을 가질 수 있습니다. 높이: 780, 너비: 1390 또는 높이: 524, 너비: 930.

React 애플리케이션은 두 가지 유형의 화면에 표시됩니다. 풀 HD 1920x1080 및 4K 3840x2054.

Div의 크기와 화면이 달라서 항상 화면에서 동일한 비율을 유지하고 두 유형의 화면에서 동일한 크기를 갖기를 원합니다.

예를 들어 태블릿, 스마트폰 또는 1920x1200 화면과 같은 다른 유형의 화면에서는 div가 달라지기를 원합니다. 최대한 유연하게 만들고 싶습니다.

4K에서는 div가 화면의 나머지 부분보다 훨씬 작게 보이지만 Full HD에서는 div가 화면의 대부분을 차지합니다.

다음과 같이 vh와 vw를 사용해 보았습니다.

으아악

이렇게 하면 각 화면 유형에 대해 동일한 vh와 vw를 얻을 수 있습니다. 하지만 4k 화면에서는 div가 Full HD에서 더 많은 공간을 차지하기 때문에 제대로 작동하지 않습니다.

이것이 제가 달성하고 싶은 결과입니다(분명히 다른 유형의 화면에서도 작동하길 원합니다). 저를 도와주시는 모든 분들께 미리 감사드립니다

P粉806834059
P粉806834059

모든 응답 (1)
P粉366946380

이는widthheight以及vwvhCSS를 사용하여 달성할 수 있습니다.

vw表示视口宽度的百分比,因此80vw是宽度的 80%。这与vh똑같고 키만 다를 뿐이에요.

으아악 으아악
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!