问：/* 在下面写你的 SCSS 代码。*/ @media screen and (orientation:landscape) { img { width: 360px; } } ul#menu { li { @media screen { max-width: 500px; 文本对齐：居中；} } }
索引.html
<！DOCTYPE HTML！>
< HTML >
<头部>
<标题>萨斯基础-代码挑战</标题> <链接的rel = “样式”类型= “文/ CSS” HREF = “页面的style.css” > <链接相对= "stylesheet" type = "text/css" href = "style.css" > </ head > < body > <div类= “包装”
>
< H1 >汉普顿的博客</ H1 > < UL ID = “菜单” > <礼> <一个HREF = “＃” >首页</一> </李> <李> <一个HREF = “＃” >关于汉普顿</一> </李> <李> <一个HREF = “＃” >汉普顿”工的</一> </立
>
</ ul > < img src = "me2.jpeg" alt = "" > < div class = "entry" > < h1 >顺丰美食</ h1 > < div class = "content" > < p > 你知道我在旧金山最喜欢的餐厅是什么吗？答案是有很多很棒的餐厅，我无法选择一家。但荣誉提名包括 Mr. Chow's、Live Sushi 和 Piccino。
<
“/info.html” >阅读更多</一>
</ p > </ DIV > </ DIV > < DIV类= “条目” > < H1 >大音</ H1 > < DIV类= “内容” > < p > 以下是我过去和现在最喜欢的一些乐队：Belle and Sebastian、Pixies 和 Daft Punk。听音乐可以让我在编程时集中注意力。
<
“/info.html” >阅读更多</一>
</ p > </ DIV > </ DIV > </ DIV > </身体> </ HTML >
样式文件
/* 在下面写你的 SCSS 代码。*/
@media screen and ( or ientation : Landscape ) {
img { width : 360px ; } } ul #menu { li { @media screen { max-width : 500px ; 文本对齐：居中；} } }
答：这里的错误在于您的第二个媒体查询的声明，可能是由于他们根据句子的措辞方式误解了他们的指示。
您需要将媒体查询设置为视口的最大宽度为 500 像素，而不是将 li 设置为最大宽度为 500 像素。
你有：
ul # menu {
li { @media screen { /* 你的媒体查询至少需要一个表达式来限制样式表的范围（例如“( max-width: 500px )”) */ max-width : 500 px ; /* 我们不需要在 li 上设置这个属性 */ text-align : center ; } } }
你需要：
ul # menu {
li { @media screen and ( max-width : 500 px ) { /* 这里，我们为媒体查询设置了最大宽度表达式 */ text - align : center ; } } }
这是MDN 媒体查询文档的链接，您可能会发现值得一读。里面有很多有用的信息！
