0

クライアントのパララックス WordPress サイトで作業しており、各リンクの背景画像にスプライトが使用されているナビゲーション バーがあります。ここで 7 つのリンクのナビゲーション バーを確認できます ( http://www.aishla.com/blog/2014/my-aish-test/ )。デスクトップでは見栄えがよくなりましたが、これらの画像をレスポンシブにしたいと考えています。つまり、デザインが小さくなるほど小さくなります。

そのため、CSS で background-size 設定を使用できると考えましたが、メディア クエリで試してみると、必要な画像の一部ではなく、a href 内のスプライト全体が取得されます。だから、これがこの方法で達成できるのか、それともさまざまな画面解像度用の一連のスプライトを作成するのに行き詰まっているのか疑問に思っています。これを機能させるために私が使用しているものの例を次に示します。

まず、デスクトップ版から:

nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center;  width: 137px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; }

最大幅 768px のメディア クエリ:

nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; }
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
4

1 に答える 1

0

申し訳ありませんがコメントできません-> background-size を使用することはできません: この方法では、背景を 137px に設定されている nav ul.sub-nav li a の幅の 79.562% にしたいので、スプライト全体が幅 108 ピクセルなので、なぜこんなに小さく見えるのか。ナビに鮮明なアイコンが必要な場合は、.svg 画像を使用するだけで、高 DPI 画面で見栄えが良くなります。

background-size を使用する場合、スプライトが 137 ピクセルに収まる回数を計算する必要があり、最終的には 600% 以上になりますが、スプライトは div と同じ比率である必要があり、すべて私はお勧めしません。

于 2014-10-03T19:19:30.650 に答える