0

私のテーマはレスポンシブであるはずでしたが、サイトにロゴをアップロードすると、レスポンシブではなくなりました。非レスポンシブ デザイン用に 1 つのロゴ (大きい) を、レスポンシブ デザイン用に別の (小さい) ロゴを使用できます。

4

2 に答える 2

0

別の方法があります：

HTML

<img src="logo_mobile.jpg" class="visible-mobile" />
<img src="logo_desktop.jpg" class="hidden-mobile" />

CSS

.visible-mobile{ display: none; }
.hidden-mobile{ display: inherit; }

@media (max-width: 320px) {
    .visible-mobile{ display: inherit; }
    .hidden-mobile{ display: none;  }
}

これにより、画面サイズに応じてロゴが表示または非表示になります。ここで例を見ることができます: http://cdpn.io/wyqxz

違いは、この場合、両方の画像がブラウザーから読み込まれるため、サイトのパフォーマンスにとって最適なソリューションではないことです。

于 2013-07-05T16:37:34.760 に答える
0

いつレスポンシブにしたいのですか、いつレスポンシブにしないようにしたいですか? 達成したいと思われることのほとんどは、メディア クエリを使用して実行できます。

.logo{
background-image: url(images/image_nonresponsive.jpg);
}

@media (max-width: 320px) {
.logo{
background-image: url(images/image_responsive.jpg);
}

これにより、幅 320px のレスポンシブ ロゴが有効になります。

于 2013-07-05T16:16:36.400 に答える