不工作：CSS媒体查询

问题描述：

我正在尝试使响应式设计网站。
但现在，我有一个麻烦。不工作：CSS媒体查询

在媒体查询（断点：768px）中配置的CSS属性不适用正确的HTML元素。非媒体查询中的CSS属性（例如，体内的font-family）确实有效。
verification img

代码在这里。

@charset "UTF-8" 
 
/*レスポンシブ用(ブレークポイント 768px)*/ 
 

 
@media (max-width: 768px) { 
 
    /* 
 
------------------ 
 
ヘッダー 
 
------------------ 
 
*/ 
 
    #main_stage div h1 { 
 
    text-align: center; 
 
    } 
 
    #main_stage div img { 
 
    width: 100%; 
 
    } 
 
    /* 
 
------------------ 
 
フッター 
 
------------------ 
 
*/ 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>JavaScript本格入門</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="media.css"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <section id="main_stage"> 
 
    <div> 
 
     <h1>Responsive</h1> 
 
     <img src="media/DSCF0959.JPG"> 
 
    </div> 
 
    </section> 
 
</body> 
 

 
</html>

我想CSS属性适用于HTML元素。

我该如何解决这个问题？

信息
浏览器：谷歌浏览器（最新版）
Vertial盒（最新版）
的CentOS 6.9

你把路径正确的链接标记？试着让媒体查询之外的h1更大，看看它是否有效 – jvitoroc

@ masterjohn12你说得对。我在mediaquery之外制作了h1，然后它已经工作了！但是，为什么不能在mediaquery中使用CSS属性？ – yashichi

答

只需更换CSS代码：

@charset "UTF-8"; 
@media screen and (max-width: 768px) { 
    #main_stage div h1 { 
     text-align: center; 
    } 
    #main_stage div img { 
     width: 100%; 
    } 
}

你正在搞分号：'@charset“UTF-8”;' –

这是我的错。我在那里添加了分号，CSS确实有效。非常感谢你！！！ – yashichi

不工作：CSS媒体查询

相关推荐