响应式弹性模态

Question

我无法将模态框设为响应式弹性框。我不太确定如何使其灵活，所以有人可以帮助我吗？

这是正在发生的事情，因为它没有响应

HTML

<div class = "modal" id = "modal">
<div class = "modal-img">
    <img src = "eunbi.jpg" alt = "kwon eunbi" class = "modal-size">
<ul class = "profile-info">
    <li class = "name">Kwon Eunbi</li>
    <li class = "text-style">Birthday: September 27, 1995</li>
    <li class = "text-style">Position: Leader, Main Dancer, Lead Vocalist</li>
    <li class = "text-style">Rank: 7</li>
</ul>
</div>
</div>

CSS

.modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid black;
background: white;
z-index: 10;
width: 900px;
max-width: 80%;
}

.modal-img{
display: flex;
}

.modal.active{
transform: translate(-50%, -50%) scale(1);
}

Answer 1

.modal-size{
     max-width:60%;
}

调整窗口大小时，图像的最大尺寸为 60% 宽度。所以测试和图像出现在同一行。

Answer 2

不太清楚flex responsive是什么意思。

在您澄清后在原始答案下方编辑/

• 是否应该修改布局并堆叠图形和标题？
• 图片应该缩小吗？
• 文字应该缩小吗？
• 文字应该放在图片上面吗？
• 还有吗？

但是，您可以从flex-wrap（避免媒体查询）开始，然后查看flex-grow、flex-shrink、flex-basis、min-width/max-width、object-fit 也可能有用了解about (for video/img), aspect-ratio也可以用... 这是一个包装 /stacking 元素的示例：（媒体查询已在另一个答案中提出）

* {/* reset you probably already have */
  box-sizing: border-box;
  list-style: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  background: white;
  z-index: 10;
  width: 900px;
  max-width: 80%;
}

.modal-img {
  display: flex;
/*added possible example without mediaquerie */
  flex-wrap: wrap;
}

.modal-img img,
.modal-img ul {
  flex-grow: 1;/* they share equally the space or the full row */
  min-width: 50%;/* for img*/
  object-fit:cover;/* for img */
  max-height: 70vh;/* if any value here is suitable or needed */
  margin: auto;/* or use justify-content/align-items on the flex parent */
}
/* end added */
.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

<div class="modal active" id="modal">
  <div class="modal-img">
    <img src="https://picsum.photos/id/1027/200/200" alt="kwon eunbi" class="modal-size">
    <ul class="profile-info">
      <li class="name">Kwon Eunbi</li>
      <li class="text-style">Birthday: September 27, 1995</li>
      <li class="text-style">Position: Leader, Main Dancer, Lead Vocalist</li>
      <li class="text-style">Rank: 7</li>
    </ul>
  </div>
</div>

如果你能澄清你所期望的行为，它会对你有用。

---

评论后编辑

是的，应该修改布局并堆叠图形和标题。我希望图片和文字一起缩小。

* {/* reset you probably already have */
  box-sizing: border-box;
  list-style: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  background: white;
  z-index: 10;
  width: 900px;
  max-width: 80%;
}

.modal-img {
  display: flex;
}
/* added */
.modal-img img,
.modal-img ul {
  flex-grow: 1;/* they share equally the space or the full row */
  max-width: 50%;  
  font-size: calc( 6px + 2vw );/* will shrink expand */
  /*or the use of clamp to set a min/max size */
  font-size: clamp( 8px, calc( 6px + 2vw ), 1.2rem) ; /* will shrink not less than 8px and expand not more than 1.2rem and will resize in between those 2 values */
  margin: auto ;/* or use justify-content/align-items on the flex parent */
  padding:0
}
.text-style {
padding-left:0.75em;
font-size:0.9em;
}
/* end added */
.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

<div class="modal active" id="modal">
  <div class="modal-img">
    <img src="https://picsum.photos/id/1027/200/200" alt="kwon eunbi" class="modal-size">
    <ul class="profile-info">
      <li class="name">Kwon Eunbi</li>
      <li class="text-style">Birthday: September 27, 1995</li>
      <li class="text-style">Position: Leader, Main Dancer, Lead Vocalist</li>
      <li class="text-style">Rank: 7</li>
    </ul>
  </div>
</div>

Answer 3

您可以为较小的屏幕添加@media only screen and (max-width: 600px)。为@media添加此代码

• 在float:none 中添加class = "profile-info" 属性，这样如果屏幕也很小，它就会位于图像下方

这段代码是主 CSS

• 对modal-size类的高度和宽度使用软代码，例如
  .modal-size{width:50%;height:50%}

Answer 4

在您的 flex 子元素上放置一个 max-width: 50%;，然后为了避免添加媒体查询，您可以将 flex-wrap: wrap; 添加到 flex 父元素。然后当 50% 的 auto break 时，这两个元素将相互叠加。

.modal-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.profile-info {
   list-style: none;
   margin-top: 1rem;
}

.profile-info,
.modal-size {
  max-width: 50%;
}

<div class="modal" id="modal">
  <div class="modal-img">
    <img src="https://placeimg.com/250/250/any" alt="kwon eunbi" class="modal-size">
    <ul class="profile-info">
      <li class="name">Kwon Eunbi</li>
      <li class="text-style">Birthday: September 27, 1995</li>
      <li class="text-style">Position: Leader, Main Dancer, Lead Vocalist</li>
      <li class="text-style">Rank: 7</li>
    </ul>
  </div>
</div>