3

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

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

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

4

2 回答 2

1

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

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

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

关于这个主题有一些很好的博客文章：

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

于 2013-04-12T20:09:19.197 回答
0

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

  1. 您可以使用媒体查询来隐藏和显示与它们相关的不同行为的不同 HTML 片段。

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

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

于 2013-04-12T20:02:03.770 回答