卡片内容在断点处不适应屏幕大小

Question

我想在我的网站主页上创建一张贺卡，但是当我试图在 600px 处设置断点时，我运行遇到了问题。

卡片包含两部分，一部分是文字，另一部分是图片。

创建断点时出现的问题是卡片确实调整了屏幕大小，但文本和图像没有。

代码如下：

.box-container {
  margin: 10px ;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 0 3px 5px rgba(0,0,0,0.03);
  
 }
.box1-side {
    flex: 0;
}
    
  
.box1-content,
.box1-side,
{
  transition: all .3s ease-out;
  color: darkslategray;
  overflow: hidden;
}


.box1-side {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.box1-content {
  background: whitesmoke;
  flex: 4;
  padding: 30px 40px;

}

.box1-side {
  background-image: url("https://images.squarespace-cdn.com/content/v1/5a3a11268a02c7220dc5c3bf/1558972772276-5RJZIHJRIOESKPVVKLGF/ke17ZwdGBToddI8pDm48kO2pS9cMHbO4RvHPc8Skf1tZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7SSwGn0TPzISNt3iSJufpcvR7xFZ2oYA-YTitnkXPCuTgiUfhLEJ_Uxi_cK3qclb8w/logo_economice.png");
  background-repeat: no-repeat;
  background-position: center;
  flex: 2;
}

@media(max-width:600px) {
    .box-container {
        margin: 1rem 0.7rem 1rem;
        max-width: 80vw
    }

}

<div class="row">
  <div class="box-container">
  <div class="box1-content content ">
    <h1>Some text here</h1>
    <p class="text-lg">And some other text here</p>
  </div>
  <div class="box1-side">
  </div>
</div>
</div>

我尝试在媒体查询中写入框内容和包含图像的一侧，但似乎没有用。或者考虑到我是初学者，也许我在这一点上错过了一些东西。

我怎样才能同时减小文本和图像的大小？

Answer 1

对于图像：使用background-size: contain;属性使图像适合容器
对于文本：您必须在 600px 断点处减小 body font-size。

一个好的解决方案是在字体大小上使用 em css 单位，它是相对于 body font-size read more info about css units from here

演示：

.box-container {
            margin: 10px;
            width: 100%;
            height: 300px;
            display: flex;
            align-items: stretch;
            box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.03);

        }

        .box1-side {
            flex: 0;
        }


        .box1-content,
        .box1-side {
            transition: all .3s ease-out;
            color: darkslategray;
            overflow: hidden;
        }


        .box1-side {
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .box1-content {
            background: whitesmoke;
            flex: 4;
            padding: 30px 40px;
        }
        .box1-content h1 { 
            font-size: 2em;
        }

        .box1-side {
            background-image: url("https://images.squarespace-cdn.com/content/v1/5a3a11268a02c7220dc5c3bf/1558972772276-5RJZIHJRIOESKPVVKLGF/ke17ZwdGBToddI8pDm48kO2pS9cMHbO4RvHPc8Skf1tZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7SSwGn0TPzISNt3iSJufpcvR7xFZ2oYA-YTitnkXPCuTgiUfhLEJ_Uxi_cK3qclb8w/logo_economice.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            flex: 2;
        }

        @media(max-width:600px) {
            .box-container {
                margin: 1rem 0.7rem 1rem;
                max-width: 80vw
            }
            body { 
                font-size: 8px;
            }

        }

<div class="row">
  <div class="box-container">
    <div class="box1-content content ">
      <h1>Some text here</h1>
      <p class="text-lg">And some other text here</p>
    </div>
    <div class="box1-side">
    </div>
  </div>
</div>

卡片内容在断点处不适应屏幕大小

Card content doesn't adjust to screen size at breakpoint

html

css

containers

media-queries

flexbox