如何让@media(max-width 425px) 单独工作，而不是跟随@media(max-width 768px)
Posted
技术标签:
【中文标题】如何让@media(max-width 425px) 单独工作，而不是跟随@media(max-width 768px)【英文标题】：How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px) 【发布时间】：2022-01-04 21:56:51 【问题描述】：我想使用 react JS 制作响应式页面。我在制作它时遇到了一些问题。我真的不知道媒体查询 CSS 是如何工作的，但是对于 @media(max-width:1024) 和 @media(max-width:768px) 大小，它可以按我的预期工作。
我猜@media (max-width:425px) 的大小也可以像@media(max-width:768px) 一样工作。但显然从@media(max-width:425px) 开始，它遵循上一个断点（@media(max-width:768px)）和@media(max-width:375px) 遵循@media(max-width:425px) 样式。在断点 320px 处回到我的预期。
这是我的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
This is content
</div>
</body>
</html>
这是我的 CSS 代码：
.container
background-color: red;
height: 100vh;
@media(max-width:1024px)
.container
background-color: yellow;
@media(max-width:768px)
.container
background-color: green;
@media(max-width:425px)
.container
background-color: blue;
@media(max-width:375px)
.container
background-color: rosybrown;
@media(max-width:320px)
.container
background-color: rosybrown;
有没有办法让每个断点采取自己的风格。如max-width:1024px 采用黄色背景，max-width:768px 采用绿色背景。如果我想在max-width:425px 它采用蓝色背景并且在max-width:375 它采用玫瑰棕色，是否有可能。提前谢谢你。
【问题讨论】：
对我来说很好用。 您在此处发布的代码应该可以按预期工作。检查拼写错误、非封闭或多余的括号和类似的东西 @Spectric 真的吗？即使我们在 chrome 上重置响应式 425px，它也会采用蓝色背景？ @Johannes 我检查了，但还是不行 【参考方案1】：尝试添加唯一的屏幕
@media(only screen and max-width:768px)
.container
background-color: green;
【讨论】：
显示错误意外 @media only screen and (max-width: 600px) body background-color: lightblue; 试试上面的代码，然后改成小于600px的屏幕，看看颜色会不会变以上是关于如何让@media(max-width 425px) 单独工作，而不是跟随@media(max-width 768px)的主要内容，如果未能解决你的问题，请参考以下文章
精简 - bootstrap响应式自定义屏宽限制 - css - @media screen and ( max-width: 767px) {}