设计响应式网站常见的误区
2019-03-30

响应式网站已经是当下比较主流的一种设计形式，不过对于从业者来说都存在着争论，但事实上并不是每个人都真的懂得其中的概念，为了能够帮助大家更好的了解响应式网站设计时常见的误区，一起来看看吧。

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

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

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

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

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

虽然响应式布局有着非常多的优点，能够使用多种设备，给用户提供舒适的浏览体验，节约不同页面的人力开发成本，便于SEO优化，以上便是设计响应式网页设计过程中常见的误区介绍了。

（编辑：柠檬味）