Question

我花了一天时间将表格从表格更新为响应式div，结果是该页面看起来与我在笔记本电脑上开始之前完全一样但现在在手机上该页面是一个很长的完美列。问题是它在中型屏幕上看起来并不那么好，即iPad。

当宽度不足以容纳div时，我使用float:left; display: inline;让div在彼此之下，但问题是该网站的大部分都使用了3列。结果是，在中型屏幕上，有两个div彼此相邻而第三个在下一行的情况，以便在this page上看到你的浏览器宽度。我想我正在寻找的方法是将所有三个div放在一条线上，或者每条线都放在自己的线上。我也很乐意听取其他想法。

我对HTML，CSS，jQuery有充分的了解，但是如果没有一个重要的问题，我真的失去了解决这个问题的方法，但是在截止日期前根本不可能。

Answer 1

第一步是删除所有表格，因为此方法已经过时，并且在使用媒体查询时无法为您提供所需的控制或灵活性。

我会选择移动优先方法，并在此布局中设置样式表。

#re2 {
  float: left;
  width: 100%; /* by default every column would be 100% width for mobile and in this example anything smaller then 641px wide */
}

不需要媒体查询，因为这将适用于移动设备和所有基本样式，即所有列都是100％宽度。

中画面

包含641px以上屏幕尺寸的样式

@media only screen and (min-width: 641px) {
  #re2 {
    width: 33.333333%; /* makes this element 1/3 of the overall width for devices above 641px wide */
  }
}

大屏幕

包含1025px以上屏幕尺寸的样式

@media only screen and (min-width: 1025px) {
  #re2 {
    width: 50%; /* makes this element half of the overall width for devices above 1025px wide */
  }
}

Answer 2

使用网格系统很容易，例如twitter bootstrap中的那个。

http://getbootstrap.com/

屏幕边界基本上有四种尺寸：大，中，小和极小。您可以在官方网站上查看样品和插图。

您需要链接bootstrap css文件，然后在div中添加一个类。

引导程序的专业版是简单快捷的。但是，如果您需要自定义设计，则需要为其编写额外的代码。即在css中使用媒体查询。

有时，使用JavaScript来检测屏幕或元素的宽度也是一种选择。如果您需要许多不同版本的布局，JavaScript会更好。

Answer 3

最后，我放弃了媒体查询，因为他们没有产生结果。 jQuery来救援：

<script>//mobile responsiveness
var width = jQuery(window).width();
function ipad() {
if (width <= 1024 && width >= 768){ //if tablet
//css here

} else if (width < 768){  //if mobile phone
//css here
}
}

jQuery(document).ready(function () {
ipad();//run when page first loads
});

jQuery(window).resize(function () {
ipad();//run on every window resize
});
</script>

Answer 4

你的div在一个表中，它们应该在一个包装div中，左边的元素应该向左浮动，右边的元素应该向右浮动。数学是你的朋友，你告诉正确的div向左浮动而左边的div是100％所以无论你调整大小它将占用100％直到它达到你定义的最大宽度。

<div id="wrapper" style="width:100%;">
<div id="IFloatLeft" style="float:left; width:50%; position:relative;">Left Content</div>
<div id="iFloatRight" style="float:right; width:50%; position:relative;">right content</div>
</div> // end wrapper

响应式设计，3列

4 个答案:

中画面

大屏幕