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

Question

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

1. 是否可以将基于像素/固定的布局用于响应式设计（显然断点会更加明显）

2. 有没有基于像素的响应式设计的例子？

Answer 1

通过使用CSS Media Queries.

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

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

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

Answer 2

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

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

对桌面视图使用普通 px 之一，然后使用媒体查询以 % 网格中的流体覆盖。

Answer 3

To answer your first question, the typical take is that responsive design without fluid grids is actually adaptive design, as adaptive design is a super set of responsive design. Can you have responsive design without fluid grids? Strictly speaking, probably not. More explanation.

But if you want your website to look good on multiple screen sizes using pixel values, you certainly can use adaptive design. It isn't as robust and won't work on as many devices, but depending on the project that isn't always necessary. If you are looking for a framework to get you started, you might want to check out Skeleton.js. I've used it before at work when we want to get something quick and simple up like this iOS app promo page.

Hope that helps.

Answer 4

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

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