Media queriesを使ってwebサイトをスマホ対応にさせる使い方

Question

Media queriesを使ってwebサイトをスマホ対応にさせたいです。wordpressのテーマはtwenty twelveです。
私がやったことは、スマホのサイズに合わせてMedia queriesをcssに

@media screen and (max-width: 640px) {
.example1{color:#800000;
}
}

と書いて、wordpressのhtmlに

<h2 class="example1">見出し</h2>

と書きました。

スマホで見ると

見出し

と文字が太くなっただけで色がついていませんでした。
また、twenty twelveは

<link rel="stylesheet" href='style.css' type="text/css" media="screen" />

HTMLのlinkタグのmedia属性がありません。
Media queriesだけでwebサイトをスマホ対応にさせることはできますか?それともできないのでしょうか?
できるとしたら、僕が書いたコードのどこらへんが間違ってますか?
具体的に教えてくれると嬉しいです。

Comments

[Lhankor_Mhy]

繰り返しになりますが、同様の質問を複数建てることは推奨されていません。重ねて繰り返しになりますが、ソースコードを見ないと何とも言えません。なぜならば、たとえばご提示のCSSが有効であっても別の行のCSSで上書きされうるからです。質問者がサイトを公開するか、ソースコードを提示しない限り解決しない問題だと思います。

Answer 1

CSSで定義しているクラス名がexampleに対し、
HTMLでh2タグに指定しているクラス名がexample1になっています。

正しいクラス名を指定することで解決すると思います。

Comments

[gonda310]

今、訂正しました。ですが、問題点は解決していません。

[gonda310]

Media queriesのコードは間違っていますか?

Answer 2

cssのセレクタは.example h2のcssクラスはexample1 ちがいます。

Comments

[gonda310]

今、訂正しました。ですが、問題点は解決していません。

[turbgraphics200]

質問の内容も修正してください。

[gonda310]

Media queriesのコードは間違っていますか?

[gonda310]

修正しました。

[gonda310]

Media queriesはmax-width:670px;で大丈夫ですよね?

[turbgraphics200]

@media screen and (max-width: 640px) はビューポートのサイズが640px以下の場合に適用されるというのは理解してますか？

[gonda310]

それだと、スマホに表示されないのでしょうか?
ラップトップはmin-width:960;ですよね?

[gonda310]

turbgraphics200さん、やっぱり自分のコードのどこかが間違っていると思うのでもう一回見直します。turbgraphics200さんのコードが正しいです。
素人で何も分からない私の質問に答えてくれてありがとうございます。
もう一度頑張ってみます。
この質問はturbgraphics200さんをベストアンサーに選びます。