내 친구가 NW.js를 사용하여 데스크톱 GUI 애플리케이션을 개발하고 있습니다. 수요자가 요청한 페이지는 커스터마이징이 많이 필요했기 때문에 제공된 많은 사진을 DOM 컴포넌트의 배경으로 사용했습니다. 당시의 크기와 레이아웃은 모두 하드코딩되어 있었습니다. 이제 우리는 데스크톱에 적응해야 합니다(휴대폰에 적응할 필요는 없고 여러 데스크톱 해상도만 있으면 됩니다). 그러나 페이지의 많은 부분이 배경으로 표시되기 때문에(p 요소의 크기를 설정한 다음 배경을 설정하기만 하면 됩니다) 이미지), 빠르고 쉽게 적응형으로 바꾸는게 어려운데 혹시 좋은 아이디어 있으신지 여쭤보고 싶습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
너비에 백분율을, 높이에 vw(뷰포트 너비)를, 배경 이미지에
를 사용할 수 있습니다.background-size: 100% 100%;.예를 들어 반응형 사각형을 구현하려는 경우 다음과 같이 할 수 있습니다.
으아아아이런 경우, 변환:스케일(다중);을 사용하여 전체 페이지를 구현할 수 있나요? (물론, 거의 전체 페이지를 배경으로 해야 합니다)
너비 비율은 고정 너비를 일괄적으로 교체해 보셨나요? 고정 해상도에서 컨테이너 너비와 요소 너비의 비율을 고려해보세요
위의 @eechen처럼 크롬 코어 브라우저를 사용하면 CSS3의 배경 크기 방법을 사용할 수 있습니다. 모든 요소 크기를 50%와 같이 확장하고 지정할 수 있습니다.