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/

Answer 2

广泛接受的方法是使用媒体查询。

以下是一篇很好的文章：http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

您可以为三种主要视口尺寸设置媒体查询：小型（手机），中型（平板电脑）和大型（台式机/笔记本电脑）：

<link href="small.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" />
<link href="medium.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />
<link href="large.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />

@Myles Gray为Responsive Web Design上的文章提供了一个非常有用的链接，值得一读。

Answer 3

less framework使用媒体查询来适应各种屏幕大小。它是一个基于10列网格的框架。它不包含任何沉重的CSS，只有媒体查询准备针对正常的屏幕尺寸，平板电脑，手机和广泛的移动布局。

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

3 个答案: