如何在適用於移動設備的響應式設計中將圖像適當放大？

我正在處理一些移動網站。我希望它們在標準顯示設備320 x 480和視網膜顯示設備640 x 960上看起來不錯。因此，我在640 x 960顯示器上創建了圖像以使其看起來更加美觀，並且我使用響應式css來調整圖像大小。我正在進步，有網站的標題部分非常接近：view mobile page 如何在適用於移動設備的響應式設計中將圖像適當放大？

唯一的問題是存在的死角向右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; }

如果我可以擺脫討厭的線來搜索的權利，我將在良好的形狀。

謝謝！

來源

2012-02-21 fmz

在我看來，你正在走錯這條路。您的按鈕圖像和徽標應該是透明的，背景漸變應通過CSS或單獨的1px × 139px圖像應用，具體取決於您對瀏覽器支持的要求。

這將允許您創建一個更流暢的佈局，而不是由像素寬度的限制，這將仍然工作，即使屏幕上有一個奇怪的分辨率（如便攜式遊戲機）。

來源

2012-02-21 16:35:04

嗨，安迪，這是使用靈活的佈局。我使用的是百分比，而不是像素。 – fmz 2012-02-21 16:36:16

@fmz：不，你的整個頁面被一個名爲'＃wrapper'的元素包裝，它的最大寬度爲'480px'。所以你的佈局是靈活的，但只適用於像素數量少於可用像素的設備。在主瀏覽器中查看一個常見的移動網站，例如http://m.facebook.com或Stack Overflow移動網站（可在底部的鏈接中訪問）。它們中的大部分都比480px寬得多，或者拉伸了瀏覽器窗口的整個寬度。 – 2012-02-21 16:38:34

這是正確的。這僅適用於那些尺寸的設備。由於存在上限，因此稱它爲準響應。 – fmz 2012-02-21 16:42:44

如何在適用於移動設備的響應式設計中將圖像適當放大？

回答

相關問題