不工作：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

來源

2017-07-30 yashichi

你把路徑正確的鏈接標記？試着讓媒體查詢之外的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%; 
    } 
}

來源

2017-07-30 16:05:28

你正在搞分號：'@charset「UTF-8」;' –

這是我的錯。我在那裏添加了分號，CSS確實有效。非常感謝你！！！ – yashichi

不工作：CSS媒體查詢

回答

相關問題