就这样吧... 哎， 这玩意儿，就是想让网页上的东西，不管你用啥手机、电脑看，都能放得下看着顺眼。我一开始也弄不明白，就跟玩积木似的，老是搞错地方。后来啊，终于摸索出来了点门道。

啥是响应式布局？

简单说就是页面能自己变！变啥？就是多点东西，小了就藏起来一些。不然啊，你用手机看网页，字都挤在一起看不清，多难受，嚯...！

为啥要用 jQuery?

翻旧账。 jQuery 就是个工具包，能帮你快速写 JavaScript 代码。不用 jQuery 也行，但是 jQuery 写起来快一点。而且啊… 我觉得 jQuery 就是好使！ 反正我喜欢用。

问题来了：为啥加载的时候不自动调整？

切中要害。 这个问题困扰我好久啊！一开始我以为是 CSS 的问题，改来改去也没用。后来才知道啊，原来是 JavaScript 代码没在刚开始的时候运行！它只会在你拖动浏览器窗口的时候才跑一下。

解决方案：函数大法!

总结一下。 关键就在这儿了！把你想让网页变的东西的代码都放到一个函数里面去。然后呢，在两个地方调用这个函数：

• 第一个地方在网页加载完之后立刻调用一次。这样就能保证刚打开网页的时候就调整好了。
• 第二个地方每次你拖动浏览器窗口的时候都调用一次。这样就能保证你拖动窗口的时候也能一直调整。

代码示例

$ { // 这个 function 是等页面都加载完了才运行的哦!  很重要!  不然找不到东西!
  function adjustElementPosition { // 这就是那个函数啦!  放你想让网页变的东西进去就行了!  名字随便取, 我就叫 adjustElementPosition 了.
    // 获取屏幕宽度... 这个很重要!  没有这个, 就不知道该怎么变了!   单位是像素 哦. 别搞错了!   比如有个盒子... 要根据屏幕宽来决定放哪里. 就用这个 width 值来判断.   太窄了就往左边靠靠, 太宽了就往右边挪挪... 你懂的.  反正就是根据这个值来决定位置和大小.     真的, 不骗你!      重要的事说三遍!!! 重要!!! 重要!!!重要!!!
    const windowWidth = $.width; // 用 jQuery 获取屏幕宽度, 很方便的. 不用自己写一堆代码了...  感谢 jQuery 的作者!!! 
    // 然后呢, 根据屏幕宽度来做不同的事情... 比方说: 把某个盒子放到另一个盒子的前面或者后面... 或者改变盒子的大小等等...   可能性太多了!! 你自己发挥想象力吧!!   哈哈哈哈!!!!   总之就是要根据屏幕宽度来决定如何调整布局.      想想你要解决什么问题就好啦!!   加油加油加油!!!
     // 我这里只是举个例子哈~   别照抄哦~ 你要改成自己的逻辑才能用~     不然没用的哦~       记住哈!!!!!!!!!
    if  { // 如果屏幕宽度小于等于768像素... 那就把某个盒子放到前面去...   为了方便手机看嘛!!  哈哈哈哈哈!!!!!
      $.insertBefore; // 把名为 myBox 的盒子放到名为 anorBox 的盒子前面去~         是不是很简单??????       只要记住这两个选择器就可以了!!!!!!
    } else { // 如果屏幕宽度大于768像素... 那就把某个盒子放到后面去.... 为了方便电脑看嘛!!     嘻嘻嘻嘻!!!!!!
      $.insertAfter; // 把名为 myBox 的盒子放到名为 anorBox 的盒子后面去~         是不是也很简单??????       只要记住这两个选择器就可以了!!!!!!
    }
  }
  adjustElementPosition; // 在页面加载完之后立刻调用一次函数! 重要!!! 重要!!!重要!!!
  $.on; // 每当浏览器窗口大小改变时都调用一次函数! 重要!!! 重要!!!重要!!!
});

一些小技巧

• 别忘了加${ ... });这是必须的！它能保证你的代码在页面完全加载完之后再运行。不然就会报错！
• 选择器要准如果你想找个盒子改一下位置、 大小什么的，就要确保你的选择器能准确地找到那个盒子。不然就会改错东西啦！
• 别太老是施行如果你经常拖动浏览器窗口的话, resize 事件会触发很多次, 会影响性能的。 可以考虑加个延迟时间, 等用户停止拖动后再施行代码。

总而言之啊, 实现响应式布局的关键就是把你想让网页变的东西的代码放到一个函数里面去, 然后在页面加载完之后和每次浏览器窗口大小改变时都调用这个函数就行了! 希望我的解释对你有帮助… 虽然可能有点乱…，别犹豫...如果还有不懂的地方… 自己多试试吧…祝你好运!其实我觉得CSS媒体查询更方便…但是老板说要用jquery…，说白了就是...