CSS 中的媒体查询未应用
Media Query in CSS not applied
我的基于网格的 CSS 中的媒体查询突然无法正常工作（几周前它工作正常，我没有做任何我记得的更改）。我尝试了不同的浏览器（firefox、safari），在浏览器上禁用缓存并验证了浏览器下载的 CSS 文件是否正确，但媒体查询从未奏效。我在 http://www.cssdesk.com/ 中的 CSS 和 HTML 文件下方进行了测试，同样，媒体查询无法正常工作。我浪费了将近半天的时间进行研究和故障排除，现在有点放弃了（否则，我的整个生命都会浪费在脆弱的 CSS 技术上）并期待在这里得到任何帮助。提前致谢。
我的CSS文件如下：
* {
/* box-sizing: determine whether width includes padding and boarder */
/* content-box: (not include) | border-box (included) | initial | inherit; */
box-sizing: border-box;
padding: 0;
border: 0 none;
margin: 0;
outline: 0;
font-family: "Microsoft YaHei";
}
body {
/*viewport size based design*/
width: 100vw;
height: 100vh;
/* Layout Design - Mobile Phone first */
display: grid;
grid-row-gap: 0.5vmin;
grid-template-rows: 15% 3% 77% 5%;
grid-template-columns: 100%;
grid-template-areas:
'banner'
'nav'
'main'
'footer';
}
/*=============================== For Banner ============================================*/
banner {
/*For Layout*/
grid-area: banner;
/* embedded or nested Grid layout */
display: grid;
/*justify for X asix and align for Y asix*/
/* Reference URL: https://css-tricks.com/snippets/css/complete-guide-grid/ */
place-content: start center;
/*For decoration*/
background-image: url("Banner.jpg"); /* relative path to style.css */
background-size: 100% 100%;
}
banner > h1 {
/*For Layout*/
top: 5%; /* percentage relative to size of containing element */
font-size: 2.8vmax;
/*For decoration*/
color: blue;
font-weight: bold;
}
/*================================== For Navigation Bar ======================================*/
nav {
grid-area: nav;
/*position: relative;*/
/*display: flex;*/
/*width: 100%;*/
/*height: 100%;*/
/*For Decoration*/
background-color: dodgerblue;
}
nav > ul {
list-style-type: none; /* remove bullets, margins and paddings in navigation bar */
display: inline-block;
height: 100%;
width: 100%;
}
nav > ul > li {
display:inline-block; /* Horizontal Navigation Bar */
height: 100%;
float: left;
}
nav > ul > li > a {
height: 100%;
padding-left:1.5vw;
padding-right:1.5vw;
/*Vertically Centralize text in <a> tag */
/*Reference URL: https://css-tricks.com/centering-css-complete-guide/*/
display: flex;
flex-direction: column;
justify-content: center;
/*For Decoration*/
text-decoration: none;
color: white;
font-weight: bold;
font-size: 2.0vmax;
}
nav a:hover {
background-color: darkblue;
cursor: pointer;
}
/* For Submenu */
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
width: 100%;
list-style-type: none; /* remove bullets, margins and paddings for all 'ul' in navigation bar */
background-color: dodgerblue;
}
nav > ul > li:hover > ul > li > a {
display: block;
width: 100%;
padding-left: 1.5vw;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 1.8vmax;
}
/*================================== For Main Area ======================================*/
main {
grid-area: main;
/*height: 100%*/
display:flex;
}
main > ul {
display: flex;
flex-flow: column nowrap;
/*grid-template-rows: repeat(auto-fill,auto);*/
}
main > ul > li {
list-style-type: none; /* remove bullets, margins and paddings */
/*height: auto;*/
/*width: 100%;*/
}
/* For all post titles (of any article category) within main area */
main div.post-title {
border-bottom: 0.5vmin solid dodgerblue;
font-size: 2.0vmax;
font-weight: bold;
color: dodgerblue;
/*text-decoration: none;*/
}
main div.post-title > a {
text-decoration: none;
}
main p {
text-align: justify;
}
/* For Meta data (Author, Date, Tag, Views, Comments etc) of all posts including articles, notices etc */
main span.post-meta {
float: right;
color: dodgerblue;
font-weight: bold;
font-size: 1.5vmax;
}
main span.post-meta > a {
text-decoration: none;
}
footer {
grid-area: footer;
position: relative;
top: 0; bottom: 0; right: 0; left: 0;
display: grid;
place-items: center center;
/*For Decoration*/
border: 2px solid white;
background-color: dodgerblue;
}
footer > p {
color:white;
font-size: 1.8vmax;
font-weight: bold;
}
/* For Tablets or Desktops with screen width > 800px */
@media screen only (min-width: 800 px) {
body {
grid-column-gap: 0.5vmin;
grid-template-rows: 15% 5% 75% 5%;
grid-template-columns: 10% 65% 15% 10%;
grid-template-areas:
'. banner banner .'
'. nav nav .'
'. main aside .'
'. footer footer .';
}
banner > h1 {
font-size: 3.0vmin;
}
nav > ul > li > a {
font-size: 2.2vmin;
}
nav > ul > li:hover > ul > li > a {
font-size: 2.0vmin;
}
main div.post-title {
font-size: 2.0vmin;
}
aside {
grid-area: aside;
border-left: 0.3vmin solid dodgerblue;
display: flex;
flex-flow: column nowrap;
}
aside > div {
border-bottom: 0.3vmin solid dodgerblue;
color: dodgerblue;
font-weight: bold;
font-size: 1.5vmin;
}
}
我的 HTML 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/style.css">
<title>This is a testing site</title>
</head>
<body>
<banner>
<h1>Website Banner</h1>
</banner>
<nav>
<ul>
<li><a href="#infobd">Menu01</a></li>
<li><a href="#infobd">Menu02</a>
<ul>
<li><a href="#info">submenu01</a></li>
<li><a href="#info">submenu02</a></li>
</ul>
</li>
</ul>
</nav>
<main>
This is Homepage.
</main>
<footer>
<p>
Footer Contents<br>
</p>
</footer>
</body>
</html>
您的媒体查询语法错误。
而不是：
@media screen only (min-width: 800 px) { ... }
尝试：
@media only screen and (min-width: 800px) { ... }
哪里出了问题：
- 使用
screen only 代替 only screen。
- 未使用
and 关键字加入媒体规则（screen 和 min-width）。
- 使用
800 px 代替 800px
我的基于网格的 CSS 中的媒体查询突然无法正常工作（几周前它工作正常，我没有做任何我记得的更改）。我尝试了不同的浏览器（firefox、safari），在浏览器上禁用缓存并验证了浏览器下载的 CSS 文件是否正确，但媒体查询从未奏效。我在 http://www.cssdesk.com/ 中的 CSS 和 HTML 文件下方进行了测试，同样，媒体查询无法正常工作。我浪费了将近半天的时间进行研究和故障排除，现在有点放弃了（否则，我的整个生命都会浪费在脆弱的 CSS 技术上）并期待在这里得到任何帮助。提前致谢。
我的CSS文件如下：
* {
/* box-sizing: determine whether width includes padding and boarder */
/* content-box: (not include) | border-box (included) | initial | inherit; */
box-sizing: border-box;
padding: 0;
border: 0 none;
margin: 0;
outline: 0;
font-family: "Microsoft YaHei";
}
body {
/*viewport size based design*/
width: 100vw;
height: 100vh;
/* Layout Design - Mobile Phone first */
display: grid;
grid-row-gap: 0.5vmin;
grid-template-rows: 15% 3% 77% 5%;
grid-template-columns: 100%;
grid-template-areas:
'banner'
'nav'
'main'
'footer';
}
/*=============================== For Banner ============================================*/
banner {
/*For Layout*/
grid-area: banner;
/* embedded or nested Grid layout */
display: grid;
/*justify for X asix and align for Y asix*/
/* Reference URL: https://css-tricks.com/snippets/css/complete-guide-grid/ */
place-content: start center;
/*For decoration*/
background-image: url("Banner.jpg"); /* relative path to style.css */
background-size: 100% 100%;
}
banner > h1 {
/*For Layout*/
top: 5%; /* percentage relative to size of containing element */
font-size: 2.8vmax;
/*For decoration*/
color: blue;
font-weight: bold;
}
/*================================== For Navigation Bar ======================================*/
nav {
grid-area: nav;
/*position: relative;*/
/*display: flex;*/
/*width: 100%;*/
/*height: 100%;*/
/*For Decoration*/
background-color: dodgerblue;
}
nav > ul {
list-style-type: none; /* remove bullets, margins and paddings in navigation bar */
display: inline-block;
height: 100%;
width: 100%;
}
nav > ul > li {
display:inline-block; /* Horizontal Navigation Bar */
height: 100%;
float: left;
}
nav > ul > li > a {
height: 100%;
padding-left:1.5vw;
padding-right:1.5vw;
/*Vertically Centralize text in <a> tag */
/*Reference URL: https://css-tricks.com/centering-css-complete-guide/*/
display: flex;
flex-direction: column;
justify-content: center;
/*For Decoration*/
text-decoration: none;
color: white;
font-weight: bold;
font-size: 2.0vmax;
}
nav a:hover {
background-color: darkblue;
cursor: pointer;
}
/* For Submenu */
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
width: 100%;
list-style-type: none; /* remove bullets, margins and paddings for all 'ul' in navigation bar */
background-color: dodgerblue;
}
nav > ul > li:hover > ul > li > a {
display: block;
width: 100%;
padding-left: 1.5vw;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 1.8vmax;
}
/*================================== For Main Area ======================================*/
main {
grid-area: main;
/*height: 100%*/
display:flex;
}
main > ul {
display: flex;
flex-flow: column nowrap;
/*grid-template-rows: repeat(auto-fill,auto);*/
}
main > ul > li {
list-style-type: none; /* remove bullets, margins and paddings */
/*height: auto;*/
/*width: 100%;*/
}
/* For all post titles (of any article category) within main area */
main div.post-title {
border-bottom: 0.5vmin solid dodgerblue;
font-size: 2.0vmax;
font-weight: bold;
color: dodgerblue;
/*text-decoration: none;*/
}
main div.post-title > a {
text-decoration: none;
}
main p {
text-align: justify;
}
/* For Meta data (Author, Date, Tag, Views, Comments etc) of all posts including articles, notices etc */
main span.post-meta {
float: right;
color: dodgerblue;
font-weight: bold;
font-size: 1.5vmax;
}
main span.post-meta > a {
text-decoration: none;
}
footer {
grid-area: footer;
position: relative;
top: 0; bottom: 0; right: 0; left: 0;
display: grid;
place-items: center center;
/*For Decoration*/
border: 2px solid white;
background-color: dodgerblue;
}
footer > p {
color:white;
font-size: 1.8vmax;
font-weight: bold;
}
/* For Tablets or Desktops with screen width > 800px */
@media screen only (min-width: 800 px) {
body {
grid-column-gap: 0.5vmin;
grid-template-rows: 15% 5% 75% 5%;
grid-template-columns: 10% 65% 15% 10%;
grid-template-areas:
'. banner banner .'
'. nav nav .'
'. main aside .'
'. footer footer .';
}
banner > h1 {
font-size: 3.0vmin;
}
nav > ul > li > a {
font-size: 2.2vmin;
}
nav > ul > li:hover > ul > li > a {
font-size: 2.0vmin;
}
main div.post-title {
font-size: 2.0vmin;
}
aside {
grid-area: aside;
border-left: 0.3vmin solid dodgerblue;
display: flex;
flex-flow: column nowrap;
}
aside > div {
border-bottom: 0.3vmin solid dodgerblue;
color: dodgerblue;
font-weight: bold;
font-size: 1.5vmin;
}
}
我的 HTML 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/style.css">
<title>This is a testing site</title>
</head>
<body>
<banner>
<h1>Website Banner</h1>
</banner>
<nav>
<ul>
<li><a href="#infobd">Menu01</a></li>
<li><a href="#infobd">Menu02</a>
<ul>
<li><a href="#info">submenu01</a></li>
<li><a href="#info">submenu02</a></li>
</ul>
</li>
</ul>
</nav>
<main>
This is Homepage.
</main>
<footer>
<p>
Footer Contents<br>
</p>
</footer>
</body>
</html>
您的媒体查询语法错误。
而不是：
@media screen only (min-width: 800 px) { ... }
尝试：
@media only screen and (min-width: 800px) { ... }
哪里出了问题：
- 使用
screen only代替only screen。 - 未使用
and关键字加入媒体规则（screen和min-width）。 - 使用
800 px代替800px