【发布时间】：2021-09-20 12:52:29
【问题描述】：
在下面的代码中，当屏幕尺寸的最大宽度为 1000 像素时，我试图更改在 nav 元素中定义的一组导航链接的 flex 功能（类名：flex-nav），这是可行的。但是当我将最大宽度减小到 900px 左右时，导航栏没有任何变化。
另外，当屏幕宽度减小到 500px 时，nav 元素的 flex 特性再次改变，并且应用了更多的 CSS 来改变 wrapper 容器的 flex 项的顺序（wrapper 是 div 容器的类名包含所有 html 标签），但看不到任何变化。请帮我解决这个问题。
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
a {
color: white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
padding: 20px 5px;
display: inline-block;
width: 100%;
text-align: center;
transition: all 0.5s;
}
a:hover {
background: rgba(0, 0, 0, 0.3);
}
.toggleNav {
display: none;
}
img {
width: 100%;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
}
input {
padding: 10px;
border: 0;
}
section,
footer {
text-align: center;
background: rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 20px 0;
color: white;
font-weight: 100;
}
/* Flex Container */
.flex-nav ul {
border: 1px solid black;
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
/* Flex Item */
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
@media all and (max-width:1000px) {
.flex-nav ul {
flex-wrap: wrap;
}
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav .social {
flex: 1 1 25%;
}
}
@media all and (max-width:500px) {
.flex-nav li {
flex-basis: 100%;
}
/* Turn on flexbox */
.wrapper {
display: flex;
flex-direction: column;
}
/* Reorder items */
.wrapper>* {
order: 999;
}
/* Nav */
.flex-nav {
order: 1;
}
.toggleNav {
display: block;
}
.flex-nav ul {
display: none;
}
.flex-nav ul.open {
display: flex;
}
/* Header */
.top {
order: 2;
}
/* Details */
.details {
order: 3;
}
/* Sign Up */
.signup {
order: 4;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlexBox Nav</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="top">
<h1><a href="#">What The Flexbox?!</a></h1>
</header>
<nav class="flex-nav">
<a href="#" class="toggleNav">☰ Menu</a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 06</a></li>
<li class="social">
<a href="http://twitter.com/wesbos"><i class="fa fa-twitter"></i></a>
</li>
<li class="social">
<a href="http://facebook.com/wesbos.developer"><i class="fa fa-facebook"></i></a>
</li>
<li class="social">
<a href="http://github.com/wesbos"><i class="fa fa-github"></i></a>
</li>
<li class="social">
<a href="http://instagram.com/wesbos"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</nav>
<section class="hero">
<img src="http://lorempixel.com/1000/600/abstract">
</section>
<section class="details">
<p>A simple video course to help you master FlexBox.</p>
<p>Sign up today to grab all the videos and exercises!</p>
</section>
<section class="signup">
<form action="" class="signup">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Email Address">
<input type="submit" value="Sign me up!">
</form>
</section>
<footer>
<p>© Crugar</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
$('.toggleNav').on('click', function() {
$('.flex-nav ul').toggleClass('open');
});
});
</script>
</body>
</html>提前谢谢你。
【问题讨论】：
-
欢迎来到 Stack Overflow！什么“不工作”？我们不知道您希望看到什么，而不是我们检查您的所有代码，您可以编辑您的描述以告诉我们没有发生什么吗？
-
这不是真的吗？我刚刚在“整页”中运行了你的 sn-p，
@media all and (max-width:1000px)适用于宽度 501px - 1000px。 -
代码运行最大宽度：1000px，但任何小于它的值都不起作用。