css - 背景画像付きの CSS メニュー。% と EM を使用して正しくスケールアップおよびスケールダウンする方法

Question

このメニューがあります。http://fhemmel.host56.com/stack/ ウィンドウのサイズを変更すると拡大縮小したいのですが、% と EM で正しく表示されます。xとyの位置とベース位置を修正して表示させようとしましたが、表示できません。

誰？

Answer 1

モバイルには必要だと思います:) 最良の方法は % でそれを行うことです。そうすればすべてが自動的に行われますが、このためには背景として画像を使用する代わりに、HTML タグとして行う必要があります。背景要素を再スケーリングすることはできません (わかりました、transform: scale で実行できますが、この場合は役に立ちません)。

次に、次のようなものがありますhttp://jsfiddle.net/55m8j/1/：

<nav>
   <ul>
    <li><a href="index.html" id="side1"><img src="image1.jpg"></a></li>             
    <li><a href="index.html" id="side2"><img src="image2.jpg"></a></li>
    <li><a href="index.html" id="side3"><img src="image3.jpg"></a></li>
    <li><a href="index.html" id="side4"><img src="image4.jpg"></a></li>
    <li><a href="index.html" id="side5"><img src="image5.jpg"></a></li>
   </ul>
</nav>

そしてCSSで

nav ul {list-style-type: none;}
nav ul li {width: 20%; float: left;}
nav ul li a {display: block;}
nav ul li a img {width: 100%; }

他の方法は、画像としてではなく、メニューを作成することです。squirell でフォントをレンダリングし、text-shadow、いくつかのグラデーション、境界線を追加すると、結果は同様になります:)