창 크기를 조정할 때 부드러운 전환 여백 비율을 달성하는 방법

Question

뷰포트가 작을 때는 뷰포트 너비의 5%, 뷰포트가 클 때는 뷰포트 너비의 15%로 요소 주위에 백분율 여백을 설정하고 싶습니다.

미디어 쿼리를 사용하여 다음과 같이 여백 값을 전환할 수 있습니다.

으아아아

그러나 창 크기가 변경될 때 한 값에서 다른 값으로 갑자기 이동하는 것보다는 백분율 간 원활한 전환을 원합니다.

다음과 같은 것이 효과가 있을 것 같아요:

으아아아

이는 마진을 마진 간 변경량의 백분율로 설정하여 이론적으로 마진 값 변경을 원활하게 해야 합니다.

예를 들어 뷰포트가 더 작은 경우: min-margin + [margin的变化量] * 0，当视口为中等大小时：min-margin + [margin的变化量] * 0.5，当视口较大时：min-margin + [margin的变化量] * 1

그러나 calc 함수는 10px / 20px와 같은 값을 0.5와 같은 소수로 직접 반환하지 않기 때문에 실제로 작동하지 않습니다. 대신 0.5픽셀을 반환합니다. 그리고 15% * 0.5 픽셀은 무리하며 여백이 기본값인 0으로 돌아가게 됩니다.

내가 잘못된 방향으로 가고 있는 건 아닐까. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

내 댓글을 팔로우하세요

• CSS calc(..)에서는 계산에 사용된 용어가 올바른지 확인해야 합니다. 나눗셈과 곱셈은 특히 주의하세요!
• 백분율 단위(%）将产生像素（px）的结果，任何视口大小单位（vh,vw,vmin,vmax)와 파생 단위를 사용할 때도 마찬가지라는 점에 유의하세요.

첫 번째 용어 (var(--max-margin) - var(--min-margin))将产生像素单位，因为大小的%가 픽셀 결과로 변환됩니다.

두 번째 항 ((100vw - 800px) / (1920 - 800) + var(--min-margin))도 픽셀 단위로 값을 생성하므로 픽셀 단위로 곱합니다.

쿠키는 쿠키와 곱해질 수 없습니다.

1차 방정식 y=mx+b의 점 경사 형식은 현재 뷰포트 크기를 기준으로 모든 크기를 계산하는 데 적합합니다. 이는 낮은 점과 높은 점 좌표를 (x1,y1) 및 (x2,y2)으로 사용하여 XY 그래프에 선을 그리는 것과 같습니다.

• 낮은 지점(또는 좌표) = 낮은 뷰포트 크기에서 필요한 여백 크기 = (x1,y1)
• 높은 지점(또는 좌표) = 높은 뷰포트 크기에서 필요한 여백 크기 = (x2,y2)

점-기울기의 수학 공식:y - y1 = m(x - x1)

• 낮은 (x1,y1) 및 높은 (x2,y2)
을 사용하세요.
• 대체 방정식 사용: y = y1 + (y2 − y1) / (x2 − x1) × (x − x1)

귀하의 경우

낮은 점의 경우 편리한 뷰포트 크기를 선택하여 사용할 수 있습니다 5%来计算该大小的边距。我使用了400px的视口宽度，得到0.05 * 400 = 20. 이제 우리는 값 (400,20)을 사용하여 최저점 (x1,y1)

을 얻습니다.

높은 점은 800px的视口上有15%的边距。由于0.15 * 800 = 120보다 큰 너비를 원하기 때문에 찾기 쉽습니다. 높은 점 (x2,y2)은 (800,120)

이 됩니다.

이제 위 방정식에 값을 입력하고(적절한 px 변환을 사용하여) 단순화합니다.

• margin = 20 * 1px + (120 - 20) / (800 - 400) * (100vw - 400 * 1px)
• => margin = 20px + 100 / 400 * (100vw - 400px)
• => margin = 20px + 0.25 * (100vw - 400px)

최종 결과를 5%和15%之间，这将需要使用CSS的clamp함수로 제한하여 최종 결과를 얻으려는 경우:

• clamp(5%, 20px + 0.25 * (100vw - 400px), 15%)

코드 스니펫은 제한된 버전과 무제한 버전의 효과를 보여줍니다(차이점을 확인하려면 브라우저를 전체 화면으로 설정하고 크기를 조정하세요).

그런데, 최종 결과의 경사-절편 형식(y = mx + b)은 25vw - 80px입니다.

으아아아 으아아아