2

这个网站是如何达到这个效果的？

http://demicreative.com

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

一个人怎么能这样？！？

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

4

3 回答 3

9

这是一种称为响应式网页设计的技术。简而言之，此技术基于不同的响应，具体取决于页面正在呈现的屏幕大小。这就是为什么当您重新调整窗口大小时，内容适合这个“新”屏幕。

这可以使用媒体查询来完成，它允许设计者不仅针对某些设备类，而且检查呈现页面的设备的物理特性。

因此，例如，在您的 CSS 中，您可以使用以下代码：

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

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

于 2012-06-27T04:46:14.163 回答
2

您可以使用 Get Sleleton 来实现类似 http://www.getskeleton.com

Html5 样板 https://github.com/h5bp/html5-boilerplate/wiki/css

于 2012-06-27T04:43:29.270 回答
2

这称为媒体查询。符合 CSS3。

http://www.w3.org/TR/css3-mediaqueries/

在您的示例链接上，这是他们 CSS 中的媒体查询：

@media all and (max-width: 480px) {
  h1 {
    background: #141414;
    font-size: 25px;
    height: 105px;
    line-height: 30px;
    padding-top: 120px;
    text-shadow: none;
  }
  h1 i {
    display: none;
  }
}

因此只有当设备的最大屏幕宽度为 480 像素时才会激活 CSS。本质上是一部手机，而不是平板电脑或显示器。

于 2012-06-27T04:45:24.440 回答