我正在尝试制作一个固定尺寸的页脚，但是有一个问题

Question

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

如下图，全屏时输出良好，没有任何问题，但如果屏幕分辨率低于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;
}

请问这个问题的原因和解决方法？

提前致谢！

Answer 1

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

如果用户与您的分辨率相同，它会看起来不错并且可以工作，但如果用户与您的分辨率不相同，则会破坏设计。

例如，您将 height: 300px; 用于 .footer，它对您当前的分辨率（假设 1600*960）可以正常工作，但对于具有不同分辨率的用户（例如 1200*800) footer 的高度可能太大了。

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

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

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

查看更多here.

我正在尝试制作一个固定尺寸的页脚，但是有一个问题

I'm trying to make a footer with a fixed size, but there's a problem

html

css

frontend

web

vue.js