我需要去掉媒体查询“media screen and (max-width: 500px)”，因为我希望我的默认设置适用于任何小于 500px 的屏幕，我不应该为我的屏幕指定屏幕宽度默认设置。但是，每当我摆脱这个媒体标签时，它都会破坏/弄乱我其余的媒体标签以及那些尺寸的屏幕设置。我如何将我的设置的默认值设置为 500 像素以下的移动设备，然后保留更大屏幕的规则？更大的屏幕需要保持相同的布局。谢谢。
这是我的代码:
* {
box-sizing: border-box;
}
i {
margin-top: 2px;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.hamburger {
background-color: grey;
width: 100%;
color: white;
text-align: right;
}
section {
border: grey solid 1px;
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border-radius: 5px;
text-align: center;
}
p {
text-align: left;
margin-left: 5px;
margin-right: 3px
}
li {
list-style-type: none;
}
@media screen and (max-width: 500px) {
header {
display: flex;
flex-direction: column;
margin-left: 80px;
}
.menu {
display: none;
}
.social {
flex-direction: row;
display: flex;
justify-content: space-around;
}
}
@media screen and (max-width: 1000px) {
.menu {
display: none;
}
div {
align-items: center;
}
.social {
display: flex;
justify-content: center;
justify-content: space-around;
border-top: grey 1px solid;
}
li,
.social {
margin-top: 5px;
}
.logo,
h1 {
display: inline;
}
header {
display: flex;
align-items: center;
justify-content: space-evenly;
position: relative;
right: 10%
}
}
@media screen and (min-width: 1001px) {
.hamburger {
display: none;
}
.menu {
text-align: right;
background-color: grey;
height: 50px;
color: white;
width: 100%;
}
.navbar {
display: inline-block;
margin-right: 30px;
padding-top: 15px;
}
header {
display: flex;
align-items: center;
justify-content: space-evenly;
position: relative;
right: 10%;
top: 20px;
}
main {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-evenly;
}
section {
width: 30%;
margin: 0;
}
.social {
display: flex;
justify-content: space-around;
padding-top: 2%;
border-top: grey 1px solid;
list-style-type: none;
}
}
.logo>img {
width: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
<header>
<div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
<h1>The ABC Company</h1>
</header>
<nav class="navbar">
<div class="hamburger">☰</div>
<ul class="menu">
<li class="navbar">Home</li>
<li class="navbar">Products</li>
<li class="navbar">About</li>
<li class="navbar">Help</li>
</ul>
</nav>
<main>
<section class="product">
<i class="fas fa-apple-alt fa-5x"></i>
<h2>A as in Apple</h2>
<p>
We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
</p>
</section>
<section class="product">
<i class="fas fa-money-bill-wave fa-5x"></i>
<h2>B as in Bail</h2>
<p>
Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
</p>
</section>
<section class="product">
<i class="fas fa-utensils fa-5x"></i>
<h2>C as in Curry</h2>
<p>
Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
</p>
</section>
</main>
<footer>
<ul class="social">
<li class="social_icon"><i class="fab fa-twitter"></i></li>
<li class="social_icon"><i class="fab fa-facebook"></i></li>
<li class="social_icon"><i class="fab fa-instagram"></i></li>
</ul>
</footer>
</body>
</html>最佳答案
* {
box-sizing: border-box;
}
i {
margin-top: 2px;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.hamburger {
background-color: grey;
width: 100%;
color: white;
text-align: right;
}
section {
border: grey solid 1px;
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border-radius: 5px;
text-align: center;
}
p {
text-align: left;
margin-left: 5px;
margin-right: 3px
}
li {
list-style-type: none;
}
header {
display: flex;
flex-direction: column;
margin-left: 80px;
}
.menu {
display: none;
}
.social {
flex-direction: row;
display: flex;
justify-content: space-around;
}
@media screen and (min-width: 501px)and (max-width: 1000px) {
.menu {
display: none;
}
div {
align-items: center;
}
.social {
display: flex;
justify-content: center;
justify-content: space-around;
border-top: grey 1px solid;
}
li,
.social {
margin-top: 5px;
}
.logo,
h1 {
display: inline;
}
header {
display: flex;
align-items: center;
justify-content: space-evenly;
position: relative;
right: 10%;
flex-direction: row;
margin-left: 0;
}
}
@media screen and (min-width: 1001px) {
.hamburger {
display: none;
}
.menu {
text-align: right;
background-color: grey;
display: block;
height: 50px;
color: white;
width: 100%;
}
.navbar {
display: inline-block;
margin-right: 30px;
padding-top: 15px;
}
header {
display: flex;
align-items: center;
justify-content: space-evenly;
position: relative;
flex-direction: row;
right: 10%;
top: 20px;
margin-left: 0;
}
main {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-evenly;
}
section {
width: 30%;
margin: 0;
}
.social {
display: flex;
justify-content: space-around;
padding-top: 2%;
border-top: grey 1px solid;
list-style-type: none;
}
}
.logo>img {
width: 50px;
}
这应该是您要查找的内容。
它不起作用的原因是您的 max-width 500 具有一些更高宽度不需要的样式；因此，如果您希望最大宽度 500 成为默认值，则必须将其更改为更高的宽度。
由于可能不是很清楚，我改变的是: 1. 将样式从媒体查询 max-width 500px 移到任何查询之外 2. 将第二个查询更改为包含最小宽度 501px 3. 新增 flex-direction: row; & 左边距:0；对剩下的两个查询
我相当确定您的 css 可以顺便优化一下，但由于这不是问题的范围，所以我现在不会这样做。
关于javascript - 我的媒体查询不起作用的原因是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55988010/