rem을 사용함에도 불구하고 확대하거나 축소할 때 요소 크기가 변경되는 이유는 무엇입니까?

Question

프로젝트를 구현 중인데 CSSposition 属性在输入中放置一个按钮，一切正常，甚至我在响应模式下也没有问题，巧合的是我想缩放-检查某些内容，我意识到当我放大或缩小输入的顶部或底部之间会出现间隙，并且在某些尺寸下没有间隙，一切都很好，我使用 rem 对于我的所有 CSS 属性，因为据我所知 rem 可以通过 viewport 进行缩放，并且这种放大或缩小与 viewport 相关 大小，所以从逻辑上讲，如果我使用 rem를 사용하고 있는데 축소하거나 확대할 때 틈이 없어야 하는데 틈이 있습니다!

단위를 rem更改为PX에서 변경하기도 했습니다(내 문제와 유사한 다른 질문에서 권장됨). 여전히 동일한 문제가 발생했습니다. 다른 브라우저에서 확인했는데 모든 브라우저에 이 문제가 있지만 다른 확대/축소 크기에서 발생하는 동작과 간격이 다릅니다. . 또한 중단점이나 크기에 응답하는 데 문제가 없으며 모든 것이 잘 작동합니다.

MDN을 기준으로 视口과 확대 또는 축소 간의 관계:

뷰포트에는 현재 표시되는 모든 항목, 특히 "뷰포트란 무엇입니까?" 섹션과 일부 탐색 메뉴가 포함됩니다. 뷰포트의 크기는 화면 크기, 브라우저가 전체 화면 모드인지 여부, 사용자가 확대했는지 여부에 따라 달라집니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

viewport 和 rem 관계:

반응형 웹페이지의 경우 웹페이지 요소의 크기는 뷰포트의 크기에 따라 변경됩니다. CSS를 사용하면 픽셀(px)과 같은 절대 단위나 백분율, em 또는 rem 단위와 같은 상대 단위를 사용하여 글꼴 크기를 선언할 수 있습니다.

https://blog.hubspot.com/website/css-rem#:~:text=Rem%20(short%20for%20%E2%80%9Croot%2D,1rem%20will%20 also%20equal% 2016 픽셀 .

그러므로 질문은 다음과 같습니다. 여러 브라우저가 다르게 동작하기 때문에 이 버튼이 확대 또는 축소로 인해 위치가 변경됩니까, 브라우저 구조나 프로그래밍과 관련이 있습니까, 아니면 단지 다른 것입니까? 그리고 그 뒤에 있는 논리는 무엇입니까?

으아악 으아악

이미지:

100% 실제 크기이므로 모든 것이 괜찮습니다

상단에 틈이 있어 90% 확대된 사이즈입니다

80% 확대한 크기이고 모든 것이 다시 정상으로 돌아왔습니다!

Zoom-in에서도 같은 결과가 나오는데, 이 문제가 내 코드와 관련이 있다면 왜 각 확대/축소 크기에서 일정하지 않은지, 내 코드와 관련이 없다면 그 뒤에서 무슨 일이 일어나고 있는 걸까요? < /p>

Answer 1

절대위치와 관련이 있는 것 같은데, 예전에 경험한 적이 있어요. 그러나 이 문제를 해결하려면 버튼 주위에 가변상자인 래퍼를 추가할 수 있습니다.

으아악 으아악