メディアクエリが反映されません

###前提・実現したいこと

HTMLでPC、ガラケーにより画面が変わるページを@mediaで作りたい。

###発生している問題・エラーメッセージ
@mediaで指定したCSSが反映されない
この場合h1の色がどの幅でも黒のままで、原因が分からない
###該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="device-width , initial-scale=1, maximum-scale=1, user-scalable=no" />
  </head>

  <body>
    <div class="text">
    <h1>あ</h1>
    </div>

    <style>
      @media screen and(min-width:768px){

        h1{
          color:blue;
        }  
        }

      @media screen and(max-width:240px){

        h1{
          color:red;
        }
        }
    </style>
  </body>
</html>

###試したこと
viewportの記載→確認
PCウインドーの幅を変えてみて確認→全て黒

###補足情報(言語/FW/ツール等のバージョンなど)
Atomで編集、Enable PreviewというHTMLをリアルタイムでプレビューできるパッケージで確認

行動規範の内容に同意します

回答1件

ベストアンサー

メディアクエリの行のandの後ろにスペースが無いことが原因のようです。
以下の指定で色が変わることが確認できました。

css
1      @media screen and (min-width:768px) {
2
3        h1{
4          color:blue;
5        }  
6      }
7
8      @media screen and (max-width:240px) {
9        h1{
10          color:red;
11        }
12      }