我正在尝试制作一个固定大小的页脚，但是有一个问题答案

【问题标题】：I'm trying to make a footer with a fixed size, but there's a problem我正在尝试制作一个固定大小的页脚，但是有一个问题
【发布时间】：2022-01-14 02:21:21
【问题描述】：

我正在制作一个响应式网站 (Vue.js)。其中，正在制作一个footer container，整个屏幕没有问题，但是如果屏幕分辨率降低，footer container就会变得比web屏幕的尺寸还小。

如下图，全屏时输出良好，没有任何问题，但如果屏幕分辨率低于1100，就会出现页脚尺寸逐渐减小的问题。

这是我的页脚html/css代码。

html

  <footer class="footer">
    <div class="footer-container">
      <div class="footer-container__first">
        <div class="footer__menu">
          <span>자주 묻는 질문</span>
          <span>문의하기</span>
          <span>블로그</span>
          <span>채용</span>
          <span>파트너 모집</span>
        </div>
        <div class="footer__sns">
          <!-- Icon -->
          <svg
          </svg>
        </div>
      </div>
      <!-- 사업자등록번호 -->
      <div class="footer-container__second">
        <h6>주식회사 XXXX</h6>
        <p>대표 XX | 사업자등록번호 123-45-67890</p>
        <p>
          XXX XXXX XXXXX | 1544-1544 | 통신판매업신고
          <a href="#">2019-서울종로-0920</a>
        </p>
        <span>운영정책</span>
        <span>개인정보처리방침</span>
        <span>이용약관</span>
        <span>공지사항</span>
      </div>
    </div>
  </footer>

css

/* main body content  */
#main-wrapper {
  width: 1100px;
  /* body center */
  margin: 0 auto;
}

/* footer style */
.footer {
  width: 100vw;
  /* margin-left: calc(-50vw + 50%); */
  height: 300px;
  background-color: #f7f7f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-container {
  height: 100%;
  width: 1140px;
  height: 200px;
}

.footer-container__first {
  display: flex;
  justify-content: space-between;
  margin-bottom: 55px;
}

.footer-container__first span {
  font-size: 15px;
  color: #2c2c2a;
}

.footer-container__second {
  /* display: flex; */
  text-align: start;
  margin-left: 22px;
}

.footer-container__second h6 {
  font-weight: bold;
}

.footer-container__second p {
  font-size: 11px;
}

.footer-container__second span {
  font-size: 12px;
  margin-right: 16px;
}

.footer__menu {
  width: 580px;
  display: flex;
  justify-content: space-around;
}

.footer__sns {
  width: 64px;
  height: auto;
  display: flex;
  justify-content: space-around;
}

.footer__sns svg {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}

我可以知道这个问题的原因和解决方法吗？

提前谢谢你！

【问题讨论】：

在你的.footer-container__first 类中添加flex-wrap: wrap; 以使.footer__sns 在屏幕尺寸减小时转到下一行。

标签： html css vue.js web frontend

【解决方案1】：

导致问题的原因是您只是使用px根据您当前的分辨率设置width和margin。

如果用户和你的分辨率相同，它看起来会很好并且可以找到，但是当用户和你的分辨率不同时会破坏设计。

例如，您将height: 300px; 用于.footer，它适用于您当前的分辨率（比如说1600*960），但对于具有不同分辨率的用户（例如1200*800），@987654329 的高度@ 可能太大了。

一种可能的解决方案是使用% 设置margin、height 和宽度的百分比，使元素根据屏幕高度和屏幕宽度的百分比（不同的分辨率）进行缩放

或者您可以使用 css 媒体规则来帮助您设置样式。

@media CSS at 规则可用于根据一个或多个媒体查询的结果应用样式表的一部分。使用它，当且仅当媒体查询与使用内容的设备匹配时，您指定一个媒体查询和一个 CSS 块以应用于文档。

查看更多here。

【讨论】：