时间戳

首页 > 解决方案 > 为移动设备调整页脚大小

html - 为移动设备调整页脚大小

问题描述

我已经制作了一个页脚，但我不知道如何使三个图像更小并垂直对齐以供移动设备使用。我想要所有 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;
  }
}

标签： htmlcss

解决方案

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

推荐阅读