这或许是最容易看懂的响应式知识科普

58UXD：积极响应式产业布局这个术语坚信绝大部分结构雕塑家都不孤单，也能确切知道它的基本呈现出效用。但具体实施及与开发者协同时，可能会碰到许多难题。找寻数据资料时发现绝大多数讲义都是特别针对前端开发技师打造出的，并充斥着许多艰涩艰涩的科唇，让人无法认知。

第一集该文希望能通过非常单纯的文本及Grignols如是说，对我们结构设计积极响应式中文网站时时常会出现的难题进行明晰的说明。

1. 自适应与积极响应式都是甚么，又有甚么差别？

许多人能对积极响应式产业布局和自适应式产业布局产生混为一谈，的确她们的基本原理是非常相近的，都是检验电子设备，根据相同的电子设备采用相同的 css。

再者她们的差别，有位很单纯的方法：同一页面在相同体积的萤幕上出访时，看邮箱与否一样，只有一个网址为积极响应式，有数个相同的邮箱为自适应。另外的界定点是：与否须要单对单的结构设计介面，是则为自适应。比如右图：

△ 积极响应式与自适应的差别

2. 自适应与积极响应式选择用别的？

假如页面机能不多，使用者可视化少，不须要时常升级换代，积极响应式结构设计从营运的缓急和保护的便捷性考量会更快，只要搞掂页面端，其他的也都搞掂了。假如从页面个人化多机能方面考量，自适应结构设计更最合适，因为这样可以更快heard使用者提供机能全面性，新体验更快的介面。比如机能繁杂、使用者可视化频密的中文网站、B2C类中文网站，使用者量较大的中文网站选择自适应更最合适。

1. 做积极响应式页面的条件是甚么？

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

这两点也是栅格系统本身的典型特点，所以利用栅格系统进行积极响应式的结构设计是顺理成章的，也比较高效快捷，所以积极响应式与栅格化天生一对好搭档。

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

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

A：包括固定产业布局、流体产业布局、混合产业布局、积极响应式产业布局。

产业布局积极响应式时，模块结构如何变化呢？简单如是说几种常见的变化形式。

产业布局不变，模块内容左右伸缩

这个页面的积极响应效用比较单纯，等比缩放就好。

产业布局不变，模块内容换行平铺

有的时候为了节省页面空间，将模块进行了平铺结构设计。

产业布局不变，模块内容增加减少

这是最常见的积极响应效用。

产业布局改变，模块位置变换

本身为左右产业布局的页面，发生积极响应时左边的导航挪到了上部，位置发生了变化。

产业布局改变，模块内容数量改变

这是一个比较特殊的灵活产业布局的中文网站，发生积极响应时，模块进行了隐藏删减处理。

1. 甚么是媒体查询？甚么是断点？

宽度/高度，电子设备的手持方向，分辨率等。

这里又一个术语来了：断点，用浏览器打开一个积极响应式中文网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面产业布局的变化点，就是我们上面说到的断点或者次断点。

△ 上图中每条线代表一个断点

2. 应该如何选择断点？

断点的设置一定是基于页面具体内容，并参考中文网站使用者的电子设备分辨率数据。结构设计过程中在一定区间内拉升或压缩，已经无法用相同的产业布局内容时，必须改变内容展现方式时，而产生的关键体积的节点。

须要注意的是，在选择断点时，不应选择将断点设置为与某些常见电子设备宽度相同，而是应该确保常见电子设备宽度能够很单纯地落入到某一结构设计范围之内。可以在各类电子设备上对结构设计进行测试并以此来调整断点。

那么完全不考量电子设备吗？不是的，电子设备仍然很重要，只是不应首先考量它们。在一开始最好是不要只考量页面结构设计在特定电子设备上的显示效用，而是应该从更通用的出访电子设备，比如手机体积、平板电脑体积及桌面显示器体积去考量它。

如何解决icon放大造成的变形及模糊难题？

当你的产品做成积极响应式结构设计的时候，可能会碰到图标在适应萤幕体积的时候拉伸或挤压变形导致模糊，这个时候可以将图标做成字体。

它的优点在于：

结构设计稿要怎么结构设计，要做几套？

结构设计几套取决于这个中文网站你会设置几个断点，而设置多少个断点，由中文网站的内容决定，结构雕塑家须要根据中文网站的实际内容找到最合适的断点，设法避免列间空白太宽或太窄的情况。