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

标签 html css ios

我正在创建一个可以在 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 标签实现此目的。

最佳答案

我建议你阅读这个:

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

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

这个也很好:

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

关于html - 为 iPhone 或 iPad 创建 2 列或 4 列的样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5333904/

相关文章:

javascript - 我可以重置 jQuery 粘性导航栏功能吗?

javascript - 为什么表格高度大于单元格高度之和?

html - 将 child 置于其 parent 的中心

html - 如何居中相对div?

html5 按钮标签的 css 重置

html - 为什么 margin-top 与 inline-block 一起工作而不与 inline 一起工作?

css - div 内的元素符号点

iphone - 在不更改 Core Data 对象的情况下修改 NSFetchRequest 结果数组的正确方法

iphone - 在 Xcode 中使用 AutoLayout 会禁用我的代码(动态地)工作?

ios - 拍摄后如何立即在照片上绘画,然后将该图像用于Xamarin表单中的进一步操作