jquery - 高级 CSS HTML 窗口大小调整

Question

这个网站是怎么做到这个效果的？

http://demicreative.com

只需调整您正在查看网站的窗口大小，您就会看到它完全改变以适应移动设备。

怎么能做到这一点？!？

如果标题有误导性，请原谅

Answer 1

这是一种称为 Responsive Web Design 的技术.简而言之，该技术基于根据呈现页面的屏幕大小而有所不同的响应。这就是为什么当您重新调整窗口大小时，内容适合这个"new"屏幕。

这可以使用 media queries 来完成，这使设计人员不仅可以针对某些设备类，还可以检查呈现页面的设备的物理特性。

因此，例如，在您的 CSS 中您可以拥有这段代码:

@media screen and (max-width: 480px) {
  .column {
    float: right;
  }
}

当屏幕宽度小于 480px 时，它会将 .column 类的所有元素向右浮动。