html - 为 iPhone 或 iPad 创建 2 列或 4 列的样式表

Question

我正在创建一个可以在 iPhone 和 iPad 上访问的网页。在 iPhone 中我想显示一个 2 列网页，在 iPad 上我想显示一个 4 列网页。iPhone 布局将是

<label width=30%>Name</label> 
<input width=70% value="John Smith"></input>
<DIV>
<label width=30%>Phone</label> 
<input width=70% value="888-555-5555"></input>

但在 iPad 上我希望它在一行上

<label width=20%>Name</label> 
<input width=30% value="John Smith"></input>
<label width=20%>Phone</label> 
<input width=30% value="888-555-5555"></input>

如果可以的话，请提供一个简单的 CSS 文件示例，它将使用 div 标签实现此目的。

Answer 1

我建议你阅读这个:

http://www.alistapart.com/articles/responsive-web-design/

这不仅仅是添加一些 CSS 规则那么简单，您需要准确了解您的目标，上面的链接是响应式网页设计的最佳链接之一。

这个也很好:

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/