gpt4 book ai didi

html - 当 Flexbox 容器空间不足时,视口(viewport)正在更改缩放比例

转载 作者:太空宇宙 更新时间:2023-11-04 06:06:39 25 4
gpt4 key购买 nike

当我对位于 Flexbox 容器中的元素进行硬编码宽度时(制作一个非常窄的 Chrome Devtools 响应窗口),我的页面开始改变缩放比例并且布局变得有点困惑。当我将查看区域设置为小于 300 像素时,问题就开始了。不幸的是,当在 jsfiddle 上的 iframe 中运行它时,您看不到这个问题 - 它必须“自己运行”,我的 html block 需要是顶级 html block 。

这里的 jsfiddle 仍然供引用:

https://jsfiddle.net/elijahww/9e1u7ptr/

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}

.contentContainer {
display: flex;
flex: 1;
}

#productShowcaseTitle {
height: 100px;
background-color: antiquewhite;
}


#productShowcaseThumbnailContainer {
flex: 1;
background-color: darkseagreen;
}
</style>
</head>
<body style="margin: 0;">
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>

<div class="contentContainer">
<div id="productShowcaseThumbnailContainer" style="padding: 10px;">
<input style="width:300px;">
</div>
</div>
</div>

</body></html>

我不知道如何让它工作。

这是一张动图: enter image description here

最佳答案

发生这种情况的原因可能是您将输入字段的宽度硬编码为 300 像素,并试图将屏幕宽度缩放到超出此范围。如果你真的想要响应式布局,那么你应该正确使用 flex-layout 并设置 flex-basisflex-growflex-shrink 每个布局元素的属性。

这些属性负责处理 flex 元素的响应行为。要阅读有关 flex 布局的更多信息,请点击此链接 Flex tutorial

关于html - 当 Flexbox 容器空间不足时,视口(viewport)正在更改缩放比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56792047/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com