在小于768px的屏幕上，我的footer-nav不显示为行，而是显示为列。我已经看过了，我确实意识到我的flexbox代码不会被考虑在内。所以我被困住了。任何帮助都会很感激。除此之外，我正试图找到一种方法来转换我的页脚，以便在屏幕尺寸大于768px的页脚上显示更多的链接。到目前为止，我还没有找到方法来做这件事。
/* -- Base Element Styles -- */
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: peachpuff;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
h1 {
color: lightslategray;
}
h2 {
color: lightslategray;
}
h3,
a {
color: lightslategrey;
}
a {
text-decoration: none;
}
p {
padding: 8px;
padding-top: 15px;
font-weight: 500;
}
.unit .p {
font-weight: 500;
}
/* -- Base Layout Styles -- */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: lightsalmon;
padding: 15px 15px 15px 15px;
}
main {
margin-top: 3rem;
}
.name {
font-size: 1.35em;
text-align: center;
margin: 0;
}
.intro-title {
text-align: center;
padding-top: 14px;
padding-bottom: 8px;
}
.main-nav {
margin-top: 5px;
}
.nav-link {
text-align: center;
}
.main-nav a {
text-align: center;
line-height: 2em;
padding: 15px 15px 15px 15px;
}
.nav-link {
font-weight: 700;
}
.container {
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
.container-2 {
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
.logo {
padding: 5px 5px 5px 5px;
}
.footer-list {
text-align: center;
padding: .5rem;
margin: 1rem;
}
/* -- Layout Containers -- */
h1 a {
padding: 0px;
}
.intro-unit,
.main-footer {
text-align: center;
}
.intro-unit {
color: lightslategray;
background: wheat;
padding: 9px 9px 9px 9px;
margin-top: 175px;
}
.main-footer {
color: floralwhite;
background-color: lightsalmon;
margin-top: 25px;
padding: 14px 10px 11px 10px;
}
.container {
padding-right: 1em;
padding-left: 1em;
}
.container-2 {
padding-right: 1em;
padding-left: 1em;
}
.unit {
padding: 10px 10px 10px 10px;
}
/* -- Media Queries -- */
@media (min-width: 768px) {
.container,
.container-2 {
width: 90%;
margin: 0 auto;
}
.intro-unit {
margin: 7rem auto;
}
}
@media (min-width: 1024px) {
.intro-unit,
.container,
.container-2 {
width: 90%;
max-width: 1150px;
}
.intro-unit {
margin: 5rem auto;
}
}
/* -- Flex Box -- */
@media (min-width: 768px) {
.main-header,
.main-nav,
.intro-unit,
.container,
.container-2,
.main-footer,
.footer-nav,
.footer-list {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.intro-unit {
flex-direction: row-reverse;
justify-content: space-around;
}
.container,
.container-2 {
flex-direction: column;
justify-content: space-around;
}
.main-footer {
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.footer-list,
.footer-nav {
flex-direction: row;
justify-content: space-between;
}
}
@media (min-width: 1024px) {
.main-header {
flex-direction: row;
justify-content: space-between;
}
.main-nav {
flex-direction: row;
}
.intro-unit {
flex-direction: row-reverse;
}
.container,
.container-2 {
flex-direction: row;
justify-content: space-around;
}
.footer-list {
flex-direction: row;
justify-content: space-between;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Webpage</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="main-header">
<h1 class="name"><a href="#">Cole Smith</a></h1>
<ul class="main-nav">
<li class="nav-link"><a href="index.html">Home</a></li>
<li class="nav-link"><a href="#portfolio">Portfolio</a></li>
<li class="nav-link"><a href="#contact">Contact</a></li>
</ul>
</div>
<header class="intro-unit">
<img class="logo" src="img/profile-picture.svg" alt="profile picture">
<div class="intro-text">
<p>Hi, my name is Cole Smith I am an aspiring front/backend Web Designer! I am currently learning web design through Treehouse Tech and this is one of my projects.</p>
</div>
</header>
<div class="intro-title" id="portfolio">
<h1>Portfolio</h1>
</div>
<main class="container">
<div class="unit-1 unit">
<img src="img/marketing.svg" alt=" image representing a marketing page">
<h2>Marketing Page</h2>
<p>This project shows the front page of a marketing website meant for specific business i'm interested in.</p>
</div>
<div class="unit-2 unit">
<img src="img/search-app.svg" alt="image representing a travel webpage design">
<h2>Search Page</h2>
<p>This project searches through a specific database to find information that the user is trying to look up.</p>
</div>
<div class="unit-3 unit">
<img src="img/travel-app.svg" alt="image representing a favorite spot-styled webpage">
<h2>travel app</h2>
<p>This project compares travel times based on different transportation methods and tells you the best one.</p>
</div>
</main>
<div class="container-2">
<div class="unit-4 unit">
<img src="img/fav-spot.svg" alt="image representing a photo gallery webpage">
<h2>Map of Favorite Spots</h2>
<p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
</div>
<div class="unit-5 unit">
<img src="img/photo-gallery.svg" alt="image representing a calculator webpage">
<h2>Photo Gallery</h2>
<p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
</div>
<div class="unit-6 unit">
<img src="img/calculator.svg" alt="Image representing calculator-styled page">
<h2>Calculator</h2>
<p>Someone can enter the numbers they want and press the big blue button and get the result.</p>
</div>
</div>
<footer class="main-footer">
<div class="footer-div">
<h3 class="footer-title">Contact</h3>
<p id="contact">If you're interested in chatting or want more information about what i've been working on, i'd love to hear from you!</p>
<p>Phone: 1 (303) 4040</p>
<p>Email: cole.smith.code@gmail.com</p>
<ul class="footer-list">
<li class="footer-nav"><a href="#">Cole Smith</a></li>
<li class="footer-nav"><a href="#">Back To Top</a></li>
</ul>
</div>
</footer>
</body>
</html>您在媒体查询中使用了min-width，这意味着它只适用于屏幕大于768px的情况。如果你想使用最小宽度，你可以把768px媒体查询中的所有内容写入你的常规CSS，当屏幕尺寸大于1024px时，你的其他媒体查询将覆盖它。
你可以在这篇文章中阅读媒体查询