小屏幕上的頁面佈局

您可以在下面看到示例圖像，我的佈局...該網站工作得很好。但是我在內容部分的左側使用了一張圖片。小屏幕上的頁面佈局

因此，如果通過筆記本電腦或手機等小屏幕訪問，內容部分不適合屏幕。它從圖像的左側開始顯示。因此，內容部分在右側稍微流出，與其他960 px網站不同，內容不適合屏幕。它在右側流出一點，因爲有150像素寬的圖像。

layout

我該如何解決這個問題？

如果通過小屏幕訪問，則無需顯示圖像。或..有沒有其他解決方案？

編輯：的jsfiddle

JSFiddle

來源

2012-05-29 demyr

該圖很有幫助，但您的HTML會有所幫助。 –

非常感謝！我不知道爲什麼這個網站很難使用？ – demyr

不是。粘貼代碼片段，突出顯示，然後選擇「{}」代碼格式按鈕。 –

乾脆讓顯示與較小寬度的內容。

對於移動優化，您還應該添加一些元標記來控制縮放因子。

，問題是：

<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />

對於添加特殊的CSS規則試試這個位置：

<style type="text/css" media="screen"> 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 630px) { 
    ... 
} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) { 
    ... 
} 
</style>

來源

2012-05-29 13:50:09 rekire

非常感謝你的男人。這是一個很酷的提示。我會考慮他們，但我的問題是關於左側的圖像對齊。如何將左側圖像和內容部分對齊，以便在通過小屏幕查看時適合屏幕顯示。 – demyr

有幾種選擇。例如。你可以浮動該圖像。用一些骯髒的'display：table'和'display：cell'東西，你也可以對標籤重新排序。如果您需要更多的細節，請隨時詢問。 – rekire

您可以使用CSS media queries目標更小的屏幕尺寸，然後要麼移到下方的內容的圖像，或者完全隱藏圖像。現在，請記住，如果您使用display：none隱藏圖像，它仍然會下載，但根本不顯示。

來源

2012-05-29 13:52:17 chipcullen

非常感謝。這對移動css很有幫助。但我的問題是關於左側的圖像的對齊 – demyr

小屏幕上的頁面佈局

回答

相關問題