如何使响应式设计过渡顺畅？答案

【问题标题】：How to make responsive design transitions smooth?如何使响应式设计过渡顺畅？
【发布时间】：2015-08-28 06:08:47
【问题描述】：

我正在实施响应式设计，我的媒体查询具有静态规则，例如：

@media (max-width: 800px) {
   #content {
      float: none;
      margin-right: 0;
   }
}

等等。

但是，当屏幕调整为规则的宽度时，这些规则会产生跳跃和闪烁。所以你从 810px 到 805，然后到 800px，然后设计突然跳转到新的媒体规则。

如何让我的响应式设计顺利跳到新媒体规则，从而实现愉快的过渡？

我看到很多网站都是这样做的，但我不知道他们是怎么做到的，所以我知道这当然是可能的......只是怎么做？

【问题讨论】：

【解决方案1】：

由于您的问题过于宽泛，以下是 google 关于该主题的好读物：

【讨论】：

【解决方案2】：

添加过渡。 https://css-tricks.com/animated-media-queries/

#content {
  float: none;
  margin-right: 0;
  transition: all 1s;

}

【讨论】：

【解决方案3】：

这取决于当 max-witdh 超过特定宽度时要更改的内容。如果你想让一个盒子的内边距变大，你可以给那个盒子一个过渡

#content{
    transition: all 250ms ease-in-out;
    padding: 10px;
}
@media (min-width: 800px) {
    #content {
        padding: 20px;
    }
}

如果您想让两个框在较大的显示器上并排显示，而在较小的屏幕上显示在彼此下方，那就完全不同了。（我会说你也需要 JavaScript。）

但另一方面...您确定要为不同屏幕尺寸之间的过渡制作动画吗？这通常会改变吗？如果它发生变化，是否值得为你的 css、js 付出努力并值得更大的文件大小？

【讨论】：