有人可以解释响应式设计的响应功能吗？

Question

我只是围绕如何构建响应式设计网站，除了不断变化的布局之外，我还负责处理各种尺寸的响应功能。例如，在桌面上，某个链接可能不存在于某个特定元素上，但是在移动设备尺寸上，它不仅应该存在，而且还应该做更大尺寸的事情。

我可以理解使用媒体查询来改变CSS中任何特定元素的大小或位置，但是如何在各个断点处更改功能（即JS和HTML）？

（我不确定该术语是否存在，但由于缺少更好的名称，我将称之为响应功能。）

Answer 1

您正在描述响应式设计与自适应设计之间的区别。

• 自适应布局会响应不同的屏幕尺寸（使用灵活性 网格和媒体查询）。他们经常隐藏内容或申请 小屏幕上不同的CSS规则。
• 自适应布局通过采用预谋的方法和优化提供给用户的内容来适应不同的屏幕尺寸和/或设备。

例如，响应式设计可能只是隐藏较小分辨率的侧边栏，而自适应设计可能会显示特定于移动设备的内容（因为网站知道用户在手机上）。

主题上有一些好blog posts：

  

两种方法之间最大的相似之处在于它们都允许   要在移动设备和各种屏幕尺寸中查看的网站，   最终为访问者提供更好的移动用户体验。   两种方法的不同之处在于它们的交付方式   响应/自适应结构：RWD依靠灵活和流畅   网格和AWD依赖于预定义的屏幕尺寸。其中一个主要   两者之间的区别在于RWD可能需要更多的代码和   流体网格，CSS和灵活的实施策略   基础，而AWD有一个简化的分层方法，其中   利用脚本来协助适应各种设备和   屏幕尺寸。

Answer 2

响应功能可以通过几种不同的方式实现：

1. 您可以使用媒体查询来隐藏和显示与其相关的不同行为的HTML的不同部分。

2. 您可以使用javascript触发您的行为，其中事件处理程序中的javascript检查大小/平台并决定要调用的行为。

3. 您可以根据大小使用javascript动态生成HTML及其相应事件处理程序的不同部分。