CSS技巧，以適應一個簡單的佈局，以行動版Safari（iPhone）

Question

我有這樣的結構非常簡單：

<div id="header"> 
    <h1>Title</h1> 
</div> 
<div id="content"> 
    <ul> 
    <li>Element 1</li> 
    <li>Element 2</li> 
    <li>...</li> 
    </ul> 
    <div id="stuff"> 
    <p>Other stuff in the content</p> 
    </div> 
</div> 
<div id="menu"> 
    <ul> 
    <li>Menu 1</li> 
    <li>Menu 2</li> 
    <li>...</li> 
    </ul> 
</div> 

，我想有這樣的行爲只有一個樣式表： 當瀏覽器的分辨率大，我想在#content的右側顯示#menu。如果不是，它可以低於。 所以，我想這一點：

#content 
{ 
    float:left; 
    width:70%; 
} 
#menu 
{ 
    width:300px; 
    float:left; 
} 

，它很有效，但在iPhone上的＃內容過大，並且有大量的空白左側。 我真的很喜歡這個屏幕儘可能多地適配到＃內容（該#stuff不是很大）。

任何你CSS忍者知道如何做到這一點？

非常感謝。

朱利安

Answer 1

瞭解如何爲移動設備提供更好的佈局（尤其是iPhone！）：
https://www.w3schools.com/css/css_rwd_viewport.asp

在這個網站上，他們解釋viewport財產用於手持設備......所以，你可以視口的寬度，因此使您的設計在iPhone上正常工作會更容易。