基于像素的响应式网页设计答案

【问题标题】：Pixel Based Responsive Web Design基于像素的响应式网页设计
【发布时间】：2012-10-05 09:51:36
【问题描述】：

然而，大多数响应式设计使用流畅的布局：

是否可以将基于像素/固定的布局用于响应式设计（显然断点会更加明显）
是否有任何基于像素的响应式设计示例？

【问题讨论】：

blog.cloudfour.com/…
vote.nsw.gov.au 这看起来就是你在说的。我相信你有充分的理由这样做......但肯定不会那么好。响应迅速，一路前行。

标签： css responsive-design

【解决方案1】：

您可以使用CSS Media Queries 为不同大小的浏览器窗口设置不同的样式表。

来源：http://css-tricks.com/css-media-queries/

演示：http://css-tricks.com/examples/MediaQueriesSidebar/

调整浏览器大小并查看页面如何适应不同的窗口大小。

【讨论】：

【解决方案2】：

我认为这将非常困难，并且会根据不同的视口大小使用 px 编写大量代码。我认为如果您没有很多要支持的视口，例如，这是可以实现的。仅支持移动尺寸和 1024px 桌面尺寸。

但是，如果您的设计布局可以通过“网格”完成，您可以使用Heroku Fluid Layouts

对桌面视图使用正常的像素，然后使用媒体查询覆盖 % 网格中的流体。

【讨论】：

【解决方案3】：

没有什么可补充的，因为其他答案涵盖了您的问题，但是，如果您选择使用像素进行媒体查询，断点将会很明显，但您始终可以为它们设置动画以对调整大小产生很好的效果，例如

.container {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-in-out;

}

@media screen and (min-width: 320px) {
    .container {width:320px; background:red;}
}

@media screen and (min-width: 480px) {
    .container {width:480px; background:green;}
}

【讨论】：

【解决方案4】：

回答你的第一个问题，典型的看法是没有流体网格的响应式设计实际上是自适应设计，因为自适应设计是响应式设计的超级集合。你可以在没有流体网格的情况下进行响应式设计吗？严格来说，可能不会。 More explanation.

但是，如果您希望您的网站在使用像素值的多种屏幕尺寸上看起来都不错，那么您当然可以使用自适应设计。它没有那么强大，也不能在尽可能多的设备上运行，但取决于项目，这并不总是必要的。如果您正在寻找一个可以帮助您入门的框架，您可能需要查看Skeleton.js。我以前在工作中使用过它，当我们想要像iOS app promo page 这样快速简单地完成一些事情时。

希望对您有所帮助。

【讨论】：