出于某种原因，我无法使我的媒体查询正常工作....有人可以解释发生了什么吗？
屏幕尺寸为 241(chrome，即 ff)
CSS
@media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
因拼写错误而编辑
最佳答案
仔细检查您的媒体查询是否是样式表中的最后一项，并且没有被其他应用的样式覆盖，例如
<style>
@media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
body {background-color: white;}
</style>
我给出的例子永远不会改变 body 元素的背景颜色，因为媒体查询下面的样式会覆盖它
关于html - 媒体查询不起作用(提供代码)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24019918/