Question

我们回顾一下的前面所讲的内容。很显然我们的工作还远未结束，网站在iPhone的320像素宽的小视口中显示得很糟糕。媒体查询尽其所能，根据设备特性应用了对应的样式。但问题是，现有的媒体查询只覆盖了小范围的视口。视口宽度小于768像素的设备都将看到内容被剪切，而视口介于768像素到960像素之间的设备，则会使用未受媒体查询样式影响的原有样式，结果我们已经知道了，一旦视口宽度小于960像素，页面就无法匹配（作者抱头长叹）。

我们需要流动布局

如果针对已知的特定访问设备，可以单独使用媒体查询来制作理想的设计效果，我们已经见过专门适配iPad有多简单。但是这种策略有严重的缺陷，换句话说，它不能适应未来的变化。目前的情形是，页面捕捉到媒体查询设置的断点，然后布局发生变化。但在捕捉到下一个视口断点之前，页面静止不变。我们需要比这更好的策略。针对各种视口的排列组合编写对应的CSS样式，无法兼容未来可能出现的设备；而一个完美的设计，往往能在一定程度上适应未来的发展。在这点上我们目前的解决方案尚不完备。目前的效果更像是一个自适应设计，而不是我们想要的真正的响应式设计。我们的设计应该在突变之前保持灵动。要做到这点，需要将呆板的固定布局修改成灵活的流动布局。