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

Question

뷰포트가 더 작을 때 뷰포트 너비의 5%, 뷰포트가 더 클 때 뷰포트 너비의 15%인 요소 주위에 백분율 여백을 설정하고 싶습니다. 미디어 쿼리를 사용하여 다음과 같이 여백의 숫자 값을 전환할 수 있습니다. .element{margin:5%;}@media(min-width:800px){.element{margin:15%;}} 그러나 저는 창 크기가 변경되면 백분율이 한 값에서 다른 값으로 갑자기 전환되지 않고 부드럽게 전환됩니다. 내 생각에는 다음과 같은 것이 효과가 있을 것 같습니다: @m

P粉511749537 · Answer

내 댓글을 팔로우하세요

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입니다.

으아아아 으아아아