我的媒体查询之一没有响应
One of my media queries is not responding
第一个和第三个媒体查询一切正常
但是当我的屏幕在中间时:
@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
选择器之后)。
删除后它会按预期工作:Fiddle example
第一个和第三个媒体查询一切正常
但是当我的屏幕在中间时:
@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
选择器之后)。
删除后它会按预期工作:Fiddle example