现在很多站长在做网站时都比较倾向于响应式设计，这是因为一个响应式网站就可以完全适应不同尺寸的设备。除此以外，响应式网站也没有缩放布局和流式布局的一些缺点。但在设计响应式网站时我们也要多加注意，仔细规划，才能更好的发挥这种设计的效用。今天这篇文章主要就是讲解缩放、流式和响应式布局的区别，响应式网站常见的3个误区，以及如何避免走进这些误区。

缩放布局VS流式布局VS响应式布局

很多人经常会弄混这三个概念，认为它们都差不多，可以随意替换使用。事实上，每一个概念都是不同的，都是不同科技发展阶段流行的网站布局方式。接下来小编就带大家看看这3种网站布局设计的区别。

缩放布局是指对网站中的每个元素进行缩放。从某种程度上来说，缩放布局有点响应式设计的味道，因为它会根据视窗尺寸的改变相应的缩放网站上的内容。不过，它与响应式布局的差别就在于，在进行缩放时，窗口整体布局是静止不动的，只改变网站里的每个元素，使它们协调一致。这种设计可以保证网站各种元素的协调一致，但这是以牺牲网站内容的可读性为代价的。

流式布局， 也叫作百分比布局，是指将元素的宽、高、内边距，外边距设置成百分比，而不使用固定数值，这样一来网站元素可以根据页面的尺寸随时调整。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前页尾，所以人们形象的称之为流式布局。这种布局方式在web前端开发的早期历史上有很广泛的使用，适用于不同尺寸的PC屏幕(那时屏幕的尺寸差异不会太大)。但是现在很多人使用手机浏览网页，使用这种布局方式设计网站，可能就会影响图片、文字在小屏幕设备上的显示效果，破坏网站的协调性、一致性。下图是流式布局在不同屏幕分辨器上的呈现，这种设计能够提供用户舒适的阅读体验但是忽略了网站元素的整体一致。

响应式布局是 随着媒体查询技术的出现而问世的，它主要是为了解决不同设备之间的兼容问题(一般是指PC，平板，手机等分辨率差异较大的设备)。这种技术可以根据视窗的大小改变网站的呈现方式。它同时兼顾了网站内容的可读性和布局格式的一致性。