html - 当浏览器宽度改变时调整 Flexbox 内容的大小

Question

我希望当我调整浏览器大小时， flex 盒内的内容也能改变大小(即文字和图像按比例缩小)。

在 flex 盒内，我有两个元素:左侧的一些文本和右侧的图像。

<div id="flexbox">
    <div id="text">
        Some text
    </div>
    <img src="images/img.png" alt="" id="image" width="400px" height="414px">
</div>

#flexbox {
    background-image:url("images/board.png");
    width:100%;
    display:flex;
    flex-flow:row no-wrap;
    justify-content:space-between;
}

#text {
    margin-left:10%;
    width:40%;
}

#image {
    margin-right:10%;
}

现在，字体大小和图像大小保持静态，因此当我调整浏览器大小时，图像最终会被切断，文本会垂直扩展。

Answer 1

您想要响应式设计。从本质上讲，响应式设计是一种使网页在任何浏览器或设备中看起来都很好的方法。如果你想让图像按比例缩小，那么你需要将它们的宽度和高度设置为其容器的一定百分比，而另一方面，该百分比应该是一个百分比其容器等。在窗口大小更改时缩小或放大文本稍微困难一些，因为您需要媒体查询。

阅读this教程来了解响应式设计，并多次单击下一章，以确保您阅读了足够的有关该主题的一般 Material 。使用media queries根据您根据自己的喜好和需求定义的具体情况来设置 font-size 属性。