500pxの画面サイズでロゴを表示し、501px以上で表示しないようにするにはどうすればよいですか？私は、背景画像やロゴを使用していますWordpressのテーマセラ を使用して

Question

、私は携帯の画面にロゴショーを作るために探しています。

ウェブサイトは、あなたが、ここでは2つの機能を利用しようとしているメディアクエリおよび表示設定しているpontifexgrp.com

Answer 1

です。メディアクエリを使用すると、画面設定に基づいてデバイスをターゲティングできます。まず、実際に画面が表示され、スクリーンリーダーや印刷された用紙ではないことを確認するには、@media screenが必要です。

次に、画面サイズを指定します。 max-widthのいずれかを使用して、より小さいより小さい番号を、電話機の場合はmin-widthに適用するルールを指定して、より大きい数字のに適用するルールを指定することができます。他のデバイス。ロゴがそのまま動作するように見えるので、それが既に存在する場合は表示する必要はなく、そうでなければ消えるようにしてください。min-width: 500pxルールを使用すると、画面が電話画面よりも大きくなるとロゴが消える。

最後に、何かを消す方法がいくつかあります（主にdisplay: noneとvisibility: hidden）。これらの2つの違いは、display: noneが実際にアイテムを削除しているため、スペースを占有するためにテーマによって使用されていた場合、ページが破損することです。一方、visibility: hiddenはアイテムを見えなくするだけですが、それでも使用されていたスペースが占有されるため、これはより安全な賭けです。

私はあなたのサイトをチェックし、ロゴは、クラスsite-logoを持っているので、あなたは次のように達成しようとしているものを行うことができます。

@media screen and (min-width: 500px) { 
    .site-logo { 
    visibility: hidden; 
    } 
} 

私はあなたのサイト上でこれを試してみましたここで私が得たものです：