Question

如果屏幕尺寸低于500px，我试图重新排列一些元素在其父元素内部向上移动，使用

进行此操作

<div class="grid">
  <div class="grid-item" id="one">
  ONE - top when browser >500px
  </div>

  <div class="grid-item" id="two">
  TWO - top when browser <500px
  </div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

我的HTML是这样的：

elseif

但是我不确定如果浏览器窗口再次大于500px，最好的方法是反转这个？这是用if ($(window).width() < 700) { $("#two").prependTo(".grid"); } else if ($(window).width() > 700){ $("#one").prependTo(".grid"); }之类的东西来完成的：

path.MoveTo( PointF(X1,Y1));  
path.lineto( PointF(X2,Y2));  path.AddEllipse(RectF(ILeft,ITop,IRight,Ibottom));  Image1.Bitmap.Canvas.BeginScene;  
Image1.Bitmap.Canvas.StrokeThickness := 1;  
Image1.Bitmap.Canvas.StrokeDash := TStrokeDash(0);
Image1.Bitmap.Canvas.DrawPath(path, CoI.X*2); 
Image1.Bitmap.Canvas.EndScene; 

etcetera..(lots of them)

或者有更强大的方式来写这个吗？

Answer 1

当浏览器窗口的大小发生变化时，将resize事件添加到窗口元素，然后应用您的代码。

$( window ).resize(function() {

   if ($(window).width() < 700) {
     $("#two").prependTo(".grid");
   } else {
     $("#one").prependTo(".grid");
   }
});

使用.prependto排列少于＆lt; 500px的元素，如何在＆gt; 500px时撤消？

1 个答案: