@media不工作
@media不工作
提问于 2018-04-10 12:34:49
我在一项家庭作业上遇到了麻烦，无法让我的媒体提问。我想我做的每一件事都是正确的，我花了2个多小时试图理解为什么在移动设备上看起来没有任何变化。如果任何人有任何想法，这将是非常有用的。附件是我的头部部分的html和我的css代码，遵循我的标准css。
<head>
<title>Pacific Trails Resort</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
<link href="pacificprint.css" rel="stylesheet" media="print">
</head>
@media only screen and (max-width: 1024px) {
body { margin: 0 ;
padding: 0 ;
background-image: none }
#wrapper { width: auto ;
min-width: 0 ;
margin: 0 ;
box-shadow: none }
h1 { margin: 0 }
nav { float: none ;
width: auto ;
padding: 0.5em }
nav li { display: inline-block }
nav a { padding: 1em }
main { padding: 1em ;
margin-left: 0 ;
font-size: 90% }
footer { margin: 0 }
}回答 1
Stack Overflow用户
发布于 2018-04-10 12:37:43
问题是有一半的CSS规则不会以分号结尾。
虽然在语句中确实可以省略最后的CSS分号，但是 (就像媒体查询一样)本身就构成了一个语句
语句是一个构造块，它以任何非空格字符开头，以第一个右大括号或分号结束(在字符串外部，非转义，不包括在另一个
{}、()或[]对中)。
因此，只有您的最后一个规则可以省略分号( footer)。
话虽如此，在每一行中添加分号是一种很好的做法，而且不会造成任何问题，因此这是您应该始终致力于的事情。
我已经对代码进行了格式化，并在下面的示例中的每一行都添加了分号：
@media only screen and (max-width: 1024px) {
body {
margin: 0;
padding: 0;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
box-shadow: none;
}
h1 {
margin: 0;
}
nav {
float: none;
width: auto;
padding: 0.5em;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
}
main {
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer {
margin: 0;
}
}<head>
<title>Pacific Trails Resort</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
<link href="pacificprint.css" rel="stylesheet" media="print">
</head>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49745362
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号