컴퓨터 지식 네트워크 - 컴퓨터 프로그래밍 - 반응형 웹페이지를 만들 때 div의 높이와 너비를 비례적으로 확대하거나 축소하려면 어떻게 해야 하나요?

반응형 웹페이지를 만들 때 div의 높이와 너비를 비례적으로 확대하거나 축소하려면 어떻게 해야 하나요?

1. 옵션 1: 반응형으로 수행합니다. 특정 설정은 반응형으로 표시하려는 방식에 따라 다릅니다.

@media 전용 화면 및 (최소 너비: 100px) 및 (최대 너비: 640px) {

div{

너비: 100px;

높이: 100px;

}

}

@media 전용 화면 및 (최소 너비: 641px) 및 (최대 너비: 789px) {< / p>

div{

너비: 200px;

높이: 200px;

}

}

2. 옵션 2: 백분율로 수행합니다. 여기서는 약간의 트릭을 사용해야 합니다. 패딩이 백분율로 측정되면 컨테이너 너비를 기준으로 계산되므로 높이를 0으로 설정할 수 있습니다. 콘텐츠가 자연스럽게 오버플로됩니다. -bottom

height:0;

width:50%;

padding-bottom:30%

그러면 이 div의 높이는 너비 비율이 30%:50%입니다

上篇: 창고 보관 프로세스 下篇: 상하이의 여러 종일제 유치원을 소개합니다. 감사합니다!
관련 내용