Question

我正在尝试制作自适应设计网站但现在，我有一个麻烦。

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

代码就在这里。

＆＃13;

@charset "UTF-8"
/*レスポンシブ用(ブレークポイント 768px)*/

@media (max-width: 768px) {
  /*
------------------
ヘッダー
------------------
*/
  #main_stage div h1 {
    text-align: center;
  }
  #main_stage div img {
    width: 100%;
  }
  /*
------------------
フッター
------------------
*/
}

＆＃13;

<!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>

＆＃13;

我想将CSS属性应用于HTML元素。

如何解决这个问题？

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

Answer 1

您只需替换css代码：

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

不起作用：CSS媒体查询

1 个答案: