如何使用javascript/jquery/css3来制作响应式flex？
我的html和css如下所示
.section {
display: flex;
}
.section > .zone:first-child {
flex: 1;
}<div class="section">
<div class="zone">
[content]
</div>
<div class="zone">
[content]
</div>
</div>
这就是我想要的，它是两列，第一列的宽度是最大化的，第二列的宽度是最小化的。但问题是，如果[content]部件中有固定宽度(或最小宽度)的元素。当窗口宽度变得足够小时，flex忽略了这一点，只是将区域重叠在彼此的顶部。我想让它在它们开始重叠之前(比如在window width X)，它应该去掉flex，这样区域就会以最大宽度垂直堆叠。
但是如果窗口宽度应该再次扩展(超过window width X)，那么它应该返回到display:flex。
有人知道我如何使用jquery来实现这一点吗？
谢谢
回答 1
Stack Overflow用户
发布于 2016-09-07 07:18:01
我认为您正在尝试模拟响应性，而不必编写任何断点。因此，您可以创建两个变量来确定屏幕大小，而不是显式地指定它们。
Fiddle Example for flex-wrap method.
.zones通常堆叠，如果它们的和宽度大于容器宽度。这是基本的包装。当-大于容器宽度时，固定大小的元素开始重叠。
将每个
.zone的outerWidth()相加，并将小于或等于该值的任何屏幕尺寸指定为小型设备。
xWidth = zone1 + zone2;
var smallDevice = windowWidth <= xWidth;Flex通常分配容器内的空间，因此如果包装，元素在有足够空间时不会堆叠。使用这一点，我们确定最宽的.zone，并将其与xWidth结合以创建另一个断点条件。当从一个小的视区缩小时，这很有帮助。由于缩小，所有堆叠的元素都有100%的宽度。或多或少。
比最大的
.zone更宽的尺寸，xWidth可以是大型设备。
dynamicBreakpoint = Math.max(zone1, zone2); // determine the greater zone
var largeDevice = windowWidth > xWidth && windowWidth > dynamicBreakpoint;然后，您可以根据窗口resize()事件在文档头中追加/删除样式表。只需记住检查样式表是否已经添加。
stylesheet = "<style type='text/css' id='checkCSS'>" + styles + "</style>";
if (checkCSS === 0 && smallDevice) {
$(stylesheet).appendTo('head');
} else if (checkCSS === 1 && largeDevice) {
$('#checkCSS').remove();
}如果使用两个以上的元素，还可以使用数组或map方法。只是对如何做到这一点的思考。绝对可以是一个更好的方法。
https://stackoverflow.com/questions/39358860
复制相似问题
腾讯云开发者
