モバイルデバイスのレスポンシブデザインで画像を適切にサイズにするにはどうすればよいですか？

Question

私は多くのモバイルWebサイトに取り組んでいます。標準のディスプレイデバイス320 x 480およびRetinaディスプレイデバイス640 x 960で見栄えを良くしてほしい。したがって、640 x 960ディスプレイで見栄えの良い画像を作成し、レスポンシブCSSを使用して画像をサイズしています。私は進歩を遂げており、サイトのヘッダー部分を非常に近づけています。 モバイルページを表示します

唯一の問題は、右側に1〜2ピクセルのデッドスペースがあることです。注：これは、サイズ変更されたWebブラウザーよりもモバイルデバイスでより明白です。

これがHTMLです：

<ul id="header">
    <li id="full-site-link"><a href="index.html"><img src="/images-mobile/btn_head-full.png" alt="btn_head-full" /></a></li>
    <li id="mobile-logo"><a href="/"><img src="/images-mobile/btn_head-logo.png" alt="btn_head-logo" /></a></li>
    <li id="mobile-search"><a href="/mobile/search"><img src="/images-mobile/btn_head-search.png" alt="btn_head-search" /></a></li>
</ul>

これがCSSです：

#wrapper            { max-width: 480px; }

ul#header           { width: 100%; margin:0; padding:0; }
ul#header li        { display: inline; margin: 0; padding: 0; }
ul#header li a      { float:left; margin-bottom: -3px; padding:0; }

ul#header li#full-site-link a   { width: 21.71875%; }  /* 139 / 640 */
ul#header li#mobile-logo a      { width: 56.5625%;  }  /* 362 / 640 */
ul#header li#mobile-search a    { width: 21.71875%; }  /* 139 / 640 */

ul#header li a img      { max-width:100%; margin: 0; padding: 0; border: none; }

検索の右側にある厄介なラインを取り除くことができれば、私は良い状態になります。

ありがとう！

Answer 1

私の意見では、あなたはこれについて間違った方法で行っています。ボタンの画像とロゴは透明である必要があり、ブラウザサポートの要件に応じて、CSSまたは個別の1px×139px画像を介してバックグラウンド勾配を適用する必要があります。

これにより、画面に奇妙な解像度（ポータブルゲームコンソールなど）があったとしても、ピクセル幅によって制約されない、より流動的なレイアウトを作成できます。