Question

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

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

Answer 1

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

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

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

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

Answer 2

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

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

将普通px用于桌面视图，然后使用媒体查询覆盖％grid中的流体。

Answer 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;}
}

Answer 4

回答第一个问题，典型的看法是没有流体网格的响应式设计实际上是自适应设计，因为自适应设计是一套超级响应式设计。你有没有流体网格的响应式设计吗？严格来说，可能不是。 More explanation

但是，如果您希望您的网站使用像素值在多种屏幕尺寸上看起来很好，那么您当然可以使用自适应设计。它不是那么强大，也不会对很多设备起作用，但取决于并非总是必要的项目。如果您正在寻找一个可以帮助您入门的框架，您可能需要查看Skeleton.js。我曾经在工作之前使用它，当我们想要像iOS app promo page那样快速简单地获得一些东西。

希望有所帮助。

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

4 个答案: