我的一个媒体查询没有响应

One of my media queries is not responding

本文关键字：查询 响应 媒体 一个 我的      更新时间：2023-09-26

第一个和第三个媒体查询一切正常

但是当我的屏幕在中间时：

@media only screen and (min-width: 481px) and (max-width: 600px)

它不起作用.

@media only screen and (min-width: 300px) and (max-width: 480px) {
  // some css styles //
}
@media only screen and (min-width: 481px) and (max-width: 600px) {
  // some css styles //
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  // some css styles //
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>New Responsive design web page</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="stylesheetTest.css" type="text/css" />
  <meta name="viewport" content="width=device-width , initial-scale = 1.0" />
</head>

在第二个媒体查询结束时（紧接在.Finish选择器之后），您有一个额外的}。

删除后，它按预期工作：小提琴示例

相关文章：