Responsive design Zurb基金会4手机VS桌面内容 我是Zurb基金会的忠实粉丝。他们刚刚发布了ZURB基金会4，它被重新设计为移动第一。我对兼顾手机、平板电脑和传统桌面体验的响应式设计还比较陌生。我正试图思考如何最好地管理这些不同设备的网站内容。使用ZURB基金会4，您可以基于小、中、大设备大小隐藏或显示内容。因此，Zurb的方法似乎是将所有内容放到设备上，让CSS根据设备决定显示什么内容（这是一种响应性设计）

我的问题是，为什么我们必须将所有内容都放到设备上？这似乎是对服务器处理的浪费，对带宽的浪费，以及浏览器处理内容时的较慢体验，其中一些内容可能因为用户使用的设备而永远不会显示给用户。我错过什么了吗？回到服务器，让它向客户机发送适合设备类型的内容不是更好吗？我们是否应该关注移动用户的数据计划，而不是发送不适合其设备类型的内容？我在responsive design上看到的所有示例都将桌面和手机/平板电脑的内容下载到客户端，这似乎是一种浪费

我正在开发一个时间输入应用程序，它根据设备类型具有不同的用户体验。台式机（全屏时）有更详细的数据输入体验，而移动/平板电脑则有不同的体验，因为设备的不动产更小。我正在开发该应用程序，因此当桌面浏览器的大小调整到768px宽时，jQuery会调用服务器，将UI换成“更小”的移动/平板电脑版本。这是否恰当？我当然不想下载两个版本的应用程序，并根据设备宽度隐藏其中一个版本

---

我的jQuery方法是否正确？我是否遗漏了一些关于响应性设计和需要根据设备定制内容的内容？任何想法、建议和指导都将不胜感激。谢谢。

< P>移动第一个ZURB基金会基本上是ZURB团队的一个哲学改变，如果你想开发一个响应的站点而不采取移动第一的方法，那么我建议使用仍然是可用和神奇的基础3。我正在读一本书，这本书为Mobile First做了一个很好的宣传，名叫Mobile First，作者是Luke Wroblewski，他也是Zurb的顾问

以下是同一作者的一篇文章，可能很有趣：

基本上：前提是你开始为手机开发和设计，这意味着基本上是iOS或Android风格的浏览器，然后添加功能

而不是从桌面/平板体验开始，移除通常使用的。在基础3中隐藏类，并且仍然可以以基础4的方式实现，它们建议使用.Suffic类添加附加内容。

这可以通过使用Compass和Sass mixin进一步实现。关于如何做到这一点，没有太多优秀的文档，但您基本上可以保持标记语义，应用id而不是类，并使用mixin将其应用于该id。这里有一些优势，可以快速遍历dom以获得id，而不是类，因此这是一个很好的方法

注意：基础4使用jQuery替换ZEPTO的掉期替换（存在一些限制）。如果您真的需要在基础4中使用ZePTO或者使用基础3，那么您可以用jQuery替换ZePTO。Zepto更轻，因此非常适合移动设备

至于使用jQuery根据浏览器的大小异步加载数据（我假设是这样），这是一种更快的方法。我不确定你是否会在这里有一个巨大的速度增加。有许多策略，分页，异步动态加载更多数据，这取决于您如何围绕这些数据安排UX/UI

还有许多其他问题，如缓存资源、CDN等，这是前端工程中的典型问题，可能会加快加载时间。与此相关的一个资源是ySlow

还有许多设计模式，如非画布幻灯片、3行（汉堡菜单）、滚动加载更多数据、无状态应用程序等，可以让你在移动应用程序中拥有相同的功能。如果您变为无状态，则在初始页面加载之后，其他页面应该几乎是即时的

我认为这里的问题更具哲理性，你是否需要所有的功能，这是我认为采取移动优先的方法试图解决的一个问题

另一件需要考虑的事情是感知的加载时间。我想我读到的是关于这是一个诱人的UX（另一个伟大的阅读），但你可以更快地获得一个加载器或旋转器的页面，它被认为是加载速度更快，即使实际上它可以加载得更慢

作为最后一点，如果您计划使用FULL，您可能会考虑使用JavaQue/ZePTO与AuthZIZ从相同的媒体查询基础上使用。这样，您就不会复制或创建与其他响应性不一致的内容

我正在开发该应用程序，因此当桌面浏览器的大小调整到768px宽时，jQuery会调用服务器，将UI换成“更小”的移动/平板电脑版本。这是否恰当

这听起来不是一个好方法。你考虑到方向改变了吗

我当然不想下载两个版本的应用程序，并根据设备宽度隐藏其中一个版本

如果您在大多数平板电脑上以纵向模式访问网站并更改为横向模式，则在下载感谢您的r