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

但是，大多数响应性设计使用流体布局：

是否可以使用基于像素/固定的布局进行响应性设计（显然，断点将更加明显）

有基于像素的响应性设计的例子吗

---

通过使用

CSS媒体查询

，可以为不同大小的浏览器窗口提供不同的样式表

资料来源：

演示：

---

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

我认为这将非常困难，根据不同的视口大小，使用px编写大量代码。我认为，如果您没有太多的视口可支持，例如，仅支持手机大小和1024px桌面大小，那么这是可以实现的

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

---

在桌面视图中使用普通的像素点，然后使用媒体查询来覆盖%网格中的流体。

由于其他答案涵盖了您的问题，因此无需添加太多内容，但是，如果您选择使用像素进行媒体查询，断点将是明显的，但您始终可以设置它们的动画，以便在调整大小时获得良好的效果，例如

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

---

要回答第一个问题，典型的做法是，没有流体网格的响应性设计实际上是自适应设计，因为自适应设计是响应性设计的超级集合。如果没有流体网格，您能否拥有响应性设计？严格地说，可能不是

但如果你想让你的网站在使用像素值的多个屏幕尺寸上看起来不错，你当然可以使用自适应设计。它没有那么强大，也不能在那么多的设备上工作，但这取决于项目，这并不总是必要的。如果您正在寻找一个框架来开始工作，那么您可能需要签出。我以前在工作中用过它，当我们想得到像这样快速简单的东西时

希望能有所帮助。

这似乎就是你所说的。我相信你有很好的理由。。。但肯定不会那么好。快走，一路走。