如何使用媒體查詢設置響應式頁腳 | html - CSS

Question

我有一個頁腳問題，必須通過使用媒體查詢來響應。

我想用 flex 方法來實現它，但我找不到獲得請求結果的方法。

另外，我認為我的 html 的組織可能會更好。

如果你們可以檢查一下，如果會很感激。 謝謝！

頁腳

帶有 940px 媒體查詢的響應式頁腳

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { max-width: 1850px; font-family: "BenchNine", sans-serif; font-size: 1.5em; line-height: 1.5; }.flex { display: flex; } img { height: auto; width: 100%; vertical-align: top; } footer { padding: 1em; justify-content: space-around; background-color: #ededed; }.footer-link { color: #000; }.footer-link:hover { color: #999; } @media screen and (max-width: 940px) { }

 <footer class="flex"> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <picture> <img src="/img/logo.png" alt="logo"> </picture> </footer>

Answer 1

例如，通過使用列寬的百分比。

footer {
  width: 100%;
  padding: 1em;
  /* justify-content: space-around; */
  background-color: #ededed;
}
footer nav, footer picture {
  display: block;
  width: 25%;
}
@media screen and (max-width: 940px) {
  footer nav, footer picture {
    width: 100%;
  }
}

請注意，如果您想要更多的圖片空間，您可以更改列的寬度，例如 3x nav 22% 和 picutre 34%

Answer 2

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { max-width: 1850px; font-family: "BenchNine", sans-serif; font-size: 1.5em; line-height: 1.5; }.flex { display: flex; flex-wrap: wrap; } img { height: auto; width: 100%; vertical-align: top; } footer { padding: 1em; background-color: #ededed; } footer > nav{flex-grow:1}.footer-link { color: #000; min-width: 190px; display: block; }.footer-link:hover { color: #999; } @media screen and (max-width: 940px) { }

 <footer class="flex"> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <picture> <img src="/img/logo.png" alt="logo"> </picture> </footer>