html - 调整移动页脚的大小

Question

我制作了一个页脚，但我不知道如何缩小这三张图片并使其在移动设备上垂直对齐。我想要所有 3 个大约 50% 的大小并且在一条垂直线上。

HTML 是 -

<div class="as-seen-footer">
  <div class="as-seen-items" style="display: flex;">
    <div class="as-featured">
      <h1 style="color: white; font-weight: lighter;">as featured in</h1>
    </div>
    <div class="verticalLine" style="padding-right: 20px;"></div>
    <div class="as-seen-images" style="display: flex;">
      <img class="alignnone size-full wp-image-5021" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/news_24_logo.svg" alt="Media 24" />
      <img class="alignnone size-full wp-image-5022" style="width: 150px; padding-right: 20px;" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/home_magazine_logo.svg" alt="Home Magazine" />
      <img class="alignnone size-full wp-image-5023" style="width: 100px; padding-right: 20px;" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tuis_tydskrif_logo.svg" alt="" />
    </div>
  </div>
</div>

桌面 CSS 是 -

.as-featured h1 {
  font-size: 22px; 
}

.as-featured {
  padding-top: 12px; 
  padding-right: 20px; 
}

img.alignnone.size-full.wp-image-5021
{
  width: 150px; 
  padding-right: 20px;
}

.as-seen-items {
  display:flex;
  text-align: center;
}

.as-seen-images {
  display:flex;
}

.as-seen-footer {
  background: #000000;
  margin-top: 20px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  height: 130px;
}

.verticalLine {
  border-left: solid #fff;
  border-width: 2px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

我尝试了以下媒体查询，它调整了文本和垂直线的大小，但我无法让图像移动和调整大小 -

@media all and (max-width: 768px)
{
  .as-featured h1 {
    font-size: 16px;
    white-space: nowrap;
  }

  .as-featured {
    padding-top: 15px; 
  }

  img.alignnone.size-full.wp-image-5021 {
    width: 60%;
    display: inline;
  }

  .as-seen-footer {
    background: #000000;
    margin-top: 10px;
    text-transform: uppercase;
    height: 100px;
  }

  .verticalLine {
    border-left: solid #fff;
    border-width: 2px;
    height: 70px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: -5px;
    margin-right: -5px;
  }
}

Answer 1

避免使用 px指定元素的宽度和高度，因为它没有响应。使用 vw和 vh代表viewport宽度和 viewport高度分别代替。 vw和 vh指定相对于正在查看网站的设备大小的大小无需使用 @media如果使用 vw和 vh指定尺寸。