CSSで画面サイズが一定の大きさ以下になるとメッセージを出す

Question

今回、PHPでサイトを制作しているのですが、スマホ版・パソコンで画面を小さくした場合に一部のデザインが崩れるので指定のpx以下の大きさになるとメッセージが出るようにしたいです。

指定の大きさ：980px以下
980px以上の場合はメッセージを消し、980px以下になるとメッセージが出るようにする

色々試しながらコードを書きましたが、ずっとメッセージが出ている状況です。
クラスは「iphonehide」です。

@media screen and (max-width: 980px) {
	.iphonehide { display: block; }
	}

このコードだとずっとメッセージが出ます。

@media screen and (max-width: 980px) {
	.iphonehide { display: none; }
	}

にすると逆に980px以上の時にメッセージが出て980px以下になるとメッセージが消えます。

解決策がわかる方はご教授いただけると幸いです。

<!--スマホ対応部分-->
<div class="iphonehide">
    <h3 style="text-align: center;">文章</h3>
    <h4 style="text-align: center;">文章</h4>
</div>

Answer 1

980px以上は非表示ということなので、

@media screen and (min-width: 980px) {
  .iphonehide { display: none; }
}

Comments

[soutaiha]

本当にありがとうございます。
maxとminでしたね
教えていただきありがとうございます。