响应式网站建设与自适应的普及知识发布者：本站     时间：2021-02-22 13:02:47

1. 自适应网站建设与响应式网站建设都是什么，又有什么区别？

很多人会对响应式布局和自适应式布局产生混淆，确实他们的原理是非常相似的，都是检测设备，根据不同的设备采用不同的 css。

至于他们的区别，有个很简单的方法：同一个页面在不同尺寸的屏幕上访问时，看网址是否一样，只有一个网址为响应式，有多个不同的网址为自适应。另外的区分点是：是否需要一对一的设计界面，是则为自适应。例如下图：

可能是最容易看懂的响应式知识科普

△ 响应式与自适应的区别

2. 自适应与响应式选择用哪个？

如果页面功能不多，用户交互少，不需要经常升级，响应式设计从运营的难易和维护的便利性考虑会更好，只要搞定网页端，其他的也都搞定了。如果从页面个性化多功能方面考虑，自适应设计更合适，因为这样可以更好地为用户提供功能全面，体验更好的界面。例如功能复杂、用户交互频繁的网站、电商类网站，用户量较大的网站选择自适应更合适。

可能是最容易看懂的响应式知识科普

场景二
1. 做响应式页面的条件是什么？

响应式可以响应的前提有两点：

页面布局具有规律性，必须建立灵活的网格基础，元素宽高可用百分比代替固定数值；
网页图片必须是可伸缩的（页面中图片不固定宽/高）。
这两点也是栅格系统本身的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较高效快捷，所以响应式与栅格化天生一对好搭档。

网格是创建一个设计精良网站的关键。在《秩序之美-网页中的网格设计》一书中，他解释成功设计的目的是「在混沌中创造秩序」。现在比较流行的 8 点栅格，就是结合基准网格（8pt）和纵向栅格进行设计的。

可能是最容易看懂的响应式知识科普

2. 使用8点栅格进行设计的价值是什么？

对于设计师：提升效率、减少决策，同时让元素之间保持一种协调的节奏。
对于团队：设计师和前端工程师之间更容易达成默契，前端可以较轻松地用肉眼丈量 8 的倍数。
对于用户：同一品牌的产品保持高质量的一致性体验，并且在自己的设备上也不会出现模糊的半像素偏移。
可能是最容易看懂的响应式知识科普

场景三
1. 常见的动态布局方式有哪些？
A：包括固定布局、流体布局、混合布局、响应式布局。

可能是最容易看懂的响应式知识科普

可能是最容易看懂的响应式知识科普

布局响应式时，模块结构如何变化呢？简单介绍几种常见的变化形式。