英文:
CSS media query with max-width: 1024px not working as expected
问题
我遇到了一个问题，无法让CSS媒体查询在max-width: 1024px的情况下正常工作。我的目标是为屏幕更大的设备创建不同的布局，因此我使用以下媒体查询：
@media only screen and (max-width: 1024px) {
/* 在这里定义你的CSS规则 */
}
这是我的另一个媒体查询：
@media (max-width: 320px) {
/* 在这里定义你的CSS规则 */
}
然而，这个媒体查询似乎完全被忽略，即使我将浏览器窗口调整到更大的宽度，较小屏幕的样式仍然生效。
有没有人有关于可能导致这个问题的建议，或如何修复它的建议？在此先感谢您的帮助！
我已经检查了是否有冲突的样式或其他可能覆盖这个媒体查询的媒体查询，我需要使用1024px。
英文:
I'm having trouble getting a CSS media query to work properly with max-width: 1024px. My goal is to have a different layout for devices with bigger screens, so I'm using the following media query:
first page
> <!DOCTYPE html> <html lang="en"> <head>
> <meta charset="utf-8">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>Food Menu</title>
> <link rel="stylesheet" href="master.css"> </head> <body>
>
> <div class="headertext">
> Mexican Food
> </div>
>
> <div class="recipelist">
> <p>Recipes</p>
> <a class="recipes" href="./recipe1/index.html">Enchiladas</a>
> <a class="recipes" href="./recipe2/index.html">Sopes</a>
> <a class="recipes" href="./recipe3/index.html">Flan</a>
> <a class="recipes" href="./recipe4/index.html">Tres Leches</a>
> <a class="recipes" href="./recipe5/index.html">Tostadas</a>
> <a class="recipes" href="./recipe6/index.html">Pozole</a>
> </div> </body> </html>
>
second page
> <!DOCTYPE html> <html lang="en"> <head>
> <meta charset="utf-8">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>Enchilada's Recipe</title>
> <link rel="stylesheet" href="../master.css"> </head> <body>
> <div id = "all">
> <div id = "header">
> <h1>Enchiladas</h1>
> </div>
> <div id = "left">
> <h2>Video</h2>
> <div>
> <iframe
> src="https://www.youtube.com/embed/CjoVxMSdfKg"></iframe>
> </div>
> </div>
> <div id = "right">
> <h2 >Recipe</h2>
> <ul>
> <li>
> INGREDIENTS
> 1 lb ground beef (I used 97/3 lean to fat ratio)
> 1/4 cup diced onions
> 2 garlic cloves minced
> 1/2 tsp ground cumin
> 1/2 tsp salt</li>
> <li>pepper to taste
> 14 corn tortillas
> 1/3 cup oil (for softening corn tortillas)
> 12 oz cheddar cheese (or Colby jack cheese)</li>
> </ul>
> </div>
> <div id = "footer">
> <h3><a href="https://www.youtube.com/watch?v=CjoVxMSdfKg">Enchilada
> Video</a></h3>
> </div>
> </div>
>
> <button class="button button1" onclick="window.location.href='../index.html'">Main Page</button>
> </body> </html>
@media only screen and (max-width: 1024px) {
button{
transform: translateY(-63vh);
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
body{
background-image: url(./images/img2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.headertext{
margin-top: 50px;
max-width: 9%;
height: 180px;
backdrop-filter: blur(5px);
color: white;
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
box-shadow: 0px 0px 16px rgb(0,0,0,0.5);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 0 auto;
transform: translateY(1vh);
}
.recipelist {
max-width: 10%;
height: 300px;
backdrop-filter: blur(5px);
color: white;
font-size: 28px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 30px;
box-shadow: 0px 0px 16px rgb(0,0,0,0.5);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 0 auto;
transform: translateY(10vh);
}
a{
color: orange;
}
a:hover{
color: greenyellow;
}
/*jello layout start*/
#all {
backdrop-filter: blur(5px);
color: orange;
transform: translateY(15vh);
width: 990px;
height: 605px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
#header {
border-bottom: 3px solid black;
text-align: center;
width: 989px;
height: 100px;
padding-top: 1em;
}
#left {
float: left;
width: 300px;
clear: left;
border-right: 1px solid black;
height: 400px;
padding-right: .5em;
}
iframe{
width: 305px;
height: 331px;
}
li{
transform: translateY(-1vh);
font-size: 25px;
}
#right {
float: left;
width: 672.9px;
height: 400px;
padding-left: .5em;
}
#footer {
width: 990px;
height: 110px;
text-align: center;
border-top: 1px double black;
padding-bottom: 1em;
clear: both;
}
/*jello layout end*/
}
here's my other media query
@media (max-width: 320px){
body{
background-image: url(./images/img1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
button{
transform: translateY(-1vh);
background-color: orange;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.headertext{
max-width: 75%;
height: 130px;
backdrop-filter: blur(5px);
color: white;
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
box-shadow: 0px 0px 16px rgb(0,0,0,0.5);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 0 auto;
}
.recipelist{
max-width: 50%;
height: 280px;
backdrop-filter: blur(5px);
color: white;
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
box-shadow: 0px 0px 16px rgb(0,0,0,0.5);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 0 auto;
transform: translateY(3vh);
}
/*jello layout start*/
#all {
backdrop-filter: blur(5px);
width: 315px;
height: 270px;
margin: auto;
position: absolute;
top: 36%;
left: 52%;
margin-right: -50%;
transform: translate(-50%, -50%) translateX(-1vh);
}
#header {
text-align: center;
width: 314px;
height: 80px;
}
#left {
display: inline-block;
width:90px;
clear: left;
height: 105px;
border: 1px solid black;
}
iframe{
width: 92px;
height: 68px;
}
li{
font-size: 9px;
transform: translateY(-2vh);
}
#right {
float: left;
width: 207px;
height: 130px;
}
#footer {
width: 314px;
height: 144px;
text-align: center;
}
h2{
font-size: 10px;
}
h3{
font-size: 12px;
}
/*jello layout end*/
However, this query seems to be ignored entirely, even when I resize my browser window to a bigger width. Instead, the styles for smaller screens continue to apply.
Does anyone have any suggestions for what might be causing this issue or how to fix it? Thanks in advance for your help!
I have checked that there are no conflicting styles or other media queries that might be overriding this one. And I need to use 1024px for this
答案1
得分: 1
问题很可能是规则相互覆盖，代码中后面出现的规则会生效。
你定义了一个查询，用于max-width: 320px，它适用于从1px到320px的屏幕宽度，还定义了一个查询，适用于从1px到1024px的屏幕宽度。所以你在1px到320px的范围内定义了两次。
不要使用max-width，而是对于1024px使用min-width。这样它只会应用于大于1024px的屏幕。根据你的描述，我认为这是你想要实现的效果。
在同样的方式下，例如，可以用以下方式来处理320px到500px之间的范围：
body {
background-color: orange;
}
@media only screen and (min-width: 321px) and (max-width: 500px) {
body {
background: green;
}
}
希望这对你有所帮助。
英文:
The issue is most likely, that the rules override each other and the one that comes later in the code will win.
The thing is you define one query for max-width: 320px which applies from 1px up to 320px and a query from 1px up to 1024px. So you define the area from 1px to 320px twice.
Instead of max-width use min-width for the 1024px. This will then only apply to screens larger than 1024px. From your description, this is what I think you want to achieve.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: orange;
}
@media only screen and (max-width: 320px) {
body {
background: green;
}
}
@media only screen and (min-width: 1024px) {
body {
background: red;
}
}
<!-- language: lang-html -->
<body>Test</body>
<!-- end snippet -->
In the same way, the area between 320px and 500px for example could be addressed with:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: orange;
}
@media only screen and (min-width: 321px) and (max-width: 500px) {
body {
background: green;
}
}
<!-- language: lang-html -->
<body>Test</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论