携帯の時に内容を非表示にする css

携帯の時に内容を非表示にする css

携帯の時に内容を非表示にしたい場合、クラスを指定しておいて、@medeia を使用し、クラスを非表示設定にしてしまえばOKです。

具体的には、こんな感じになります。

<div class="headline">
  :
</div>
<style>
.headline { display:none; } <!-- PCの場合非表示 -->
@media screen and (min-width: 641px) and (max-width: 768px) {
.headline { display:block; } <!-- 携帯(ウィンドサイズが641px ~ 798px まで)は、表示 -->
}
@media screen and (max-width: 640px) {
.headline { display:block; }<!-- 携帯(ウィンドサイズが ~ 640px まで)は、表示 -->
}
</style>


スポンサーリンク