動作しません：CSSメディアクエリ

私はレスポンシブデザインウェブサイトを作ろうとしています。
しかし、今、私は1つの問題があります。動作しません：CSSメディアクエリ

メディアクエリ（ブレークポイント：768px）でCSSプロパティを設定しても、適切なHTML要素が適用されません。メディアクエリではないCSSプロパティ（body内の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>

私は、HTML要素にCSSプロパティを適用したいです。

この問題を解決するにはどうすればよいですか？

情報
ブラウザ：Google Chromeの（最新版）
Vertialボックス（最新版）
のCentOS 6.9

出典

2017-07-30 yashichi

入れましたリンクタグで正しくパス？ h1をメディアクエストの外に大きくして、それが機能するかどうかを確認してください。 – jvitoroc

@ masterjohn12そうです。私はメディアクエストの外で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メディアクエリ

答えて

関連する問題