尽管使用了 rem,为什么当我放大或缩小时元素大小会发生变化?
P粉729198207
P粉729198207 2023-09-08 15:06:21
0
1
437

我正在实现一个项目,我使用CSSposition属性在输入中放置一个按钮,一切正常,甚至我在响应模式下也没有问题,巧合的是我想缩放-检查某些内容,我意识到当我放大或缩小输入的顶部或底部之间会出现间隙,并且在某些尺寸下没有间隙,一切都很好,我使用rem 对于我的所有 CSS 属性,因为据我所知rem可以通过viewport进行缩放,并且这种放大或缩小与viewport 相关大小,所以从逻辑上讲,如果我使用rem,当我缩小或放大时不应该有任何间隙,但确实有!

我什至将单位从rem更改为PX(在与我的问题类似的另一个问题中推荐),仍然是同样的问题,我在不同的浏览器上检查了它,每个浏览器都有这个问题,但它们的行为和它们在不同的缩放尺寸下造成的差距是不同的。此外,我在响应断点或大小方面没有任何问题,一切都工作正常。

基于MDN视口与放大或缩小之间的关系:

您的视口是当前可见的所有内容,特别是“什么是视口”部分,也许还有一些导航菜单。视口的大小取决于屏幕的大小、浏览器是否处于全屏模式以及用户是否放大

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

viewportrem之间的关系:

对于响应式网页,网页元素的大小会随着视口的大小而变化。 CSS 使您能够使用绝对单位(如像素 (px))或相对单位(如百分比、em 或 rem 单位)来声明字体大小。

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

所以问题是:因为多个浏览器的行为不同,这个按钮是否由于放大或缩小而重新定位,与浏览器结构或编程有关,还是只是其他原因,其背后的逻辑是什么?

/*Default Adjustments*/ :root { --color-secondary: #00acc1; --color-accent: #F86F03; --color-body: #212121; --color-text: #FBFFDC; --colorButton: #847f7d; --colorBorder: #A8A196; } *, *::before, *::after { box-sizing: border-box; } *, ::placeholder { color: var(--color-text); } html { font-size: 10px; } body { font-family: "Inter", arial, helvetica, sans-serif; font-size: 1.5rem; line-height: 1.5; background: var(--color-body); } .btn { background: var(--colorButton); border: .1rem solid var(--colorBorder); border-radius: .3rem; } /*Basic divs*/ .adjust { display: flex; justify-content: center; } .whole { background: var(--color-secondary); padding: 1.5rem; border-radius: 0.6rem; margin-top: 2rem; } .add { position: relative; display: flex; justify-content: center; margin-bottom: 1.3rem; } .addButton { position: absolute; cursor: pointer; top: 0.27rem; right: 8rem; font-size: 1.3rem; border: 0; border-radius: 0 .3rem .3rem 0; background: var(--colorButton); } .add input { outline: none; text-indent: 0.5rem; font-size: 1.3rem; background: var(--colorBorder); border: .3rem solid var(--colorButton); border-radius: .5rem; } .add input::placeholder { font-size: 1.25rem; }

图像

这是 100% 缩放尺寸,一切正常

这是缩放尺寸的 90%,顶部有一个间隙

这是缩放尺寸的 80%,一切又恢复正常了!

在 Zooming-in 中也会出现相同的结果,所以如果这个问题与我的代码有关,为什么它在每个缩放尺寸中都不是恒定的,如果它与我的代码无关,那么幕后发生了什么?< /p>

P粉729198207
P粉729198207

全部回复 (1)
P粉924915787

我认为这与绝对位置有关,我以前经历过。 然而,为了解决这个问题,您可以在按钮周围添加一个包装器,这个包装器是一个弹性盒。

.wrapper { height: 100%; width: fit-content; padding: .3rem 0; position: absolute; top: 0; right: 0; float: left; border-radius: 0 .3rem .3rem 0; display: flex; /*To keep item centered so gap will not appear*/ align-items: center; } .addButton { font-size: 1.3rem; border: 0; background: var(--colorButton); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; cursor: pointer; }
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!