问题标签 [adaptive-design]

我有一个吐出 JSON 的 Spring MVC 应用程序。我计划使用 AngularJS 作为我的前端，并希望它使用基于用户代理（桌面/移动）的不同模板。我可以知道使用 AngularJS 是否可行？如果是这样，怎么做？有更好的方法吗？

我已将我的 spring 应用程序配置如下：

要求：

返回 Student后Controller，根据 对 Student 对象及其内部的所有复杂属性进行修改Annotation，例如，如果请求来自移动端，则将学生名称修剪为 10 等等。

我能想到的方法：

1. 递归迭代带有注释的字段并修改字段。每次对类字段的迭代可能会很忙，因为类很复杂并且最多可以嵌套 n 层。

2. 在服务器启动时创建一个带注释的字段列表，然后在此列表上迭代并将更改应用于目标对象。

   我目前正在努力使用这两种方法。所以想知道是否存在一些预构建的解决方案或设计模式来处理这种情况。

我不熟悉响应式网站，并想开始创建一个考虑所有屏幕的网站。

显然媒体查询是要走的路，但它们只关注 CSS。

在我当前的项目中，我想根据页面的宽度（完全与设备无关）以不同的方式组织页面。问题是，在小宽度上，我希望 HTML 布局完全改变，所以我必须使 HTML “响应”，并且它应该根据网站宽度而改变。

我怎样才能做到这一点？是否有任何 js 库（如果可能，但不是强制性的 jQuery）可以根据页面的宽度“服务”另一个 html 页面？

整个网站应该以这种方式构建，因此脚本应该不仅仅是一个小工具，它应该足够坚固以允许整个网站依赖它。当然，它应该可以在任何设备、屏幕或浏览器上运行。

有人会说我正在寻找自适应技术而不是响应式技术，但我相信这是这两者之间的混合，因为元素通常仍然是响应式的，但在一些关键断点之间，它确实会适应和改变 html。

我阅读了很多关于不同技术的文章，但我找不到适合我需要的东西。任何线索将不胜感激。

谢谢您的帮助。

我正在使用自适应图像在我的网站上调整图像大小。我有一个从另一个网站读取图像 url 的 javascript 数组。有 javascript 代码循环遍历图像数组并将这些图像插入到 html 页面上。我阅读了使用自适应图像的说明。当我将图像存储在名为 'myImages' 的文件夹中时，会使用这行指令：

.htaccess 文件由adaptive-images.com 提供

问题是我从另一个网站获取图像。那么如何编辑 .htaccess 文件以便它接受来自另一个 wesbtie 的图像

这是 javascript 代码：（图像是从另一个网站生成的，例如 dummyimages.com）

我正在开发一个可以动态处理启动画面的应用程序。问题是，我们只能在服务器上上传一张背景图片，所以在服务器端我需要准备这张图片以适应不同类型的设备。

我似乎无法找到一个准确的图像分辨率列表（以 px 为单位），它或多或少地涵盖了所有 Android 设备（与我的 iPhone 相比，分辨率通常看起来非常低，并且通常不包括平板电脑）。

有没有人有这些信息，所以我可以将服务器设置为从我上传的唯一图片生成不同的分辨率，然后我可以检索适合我当前正在使用的设备的任何内容（通过传递有关大小的相关信息）？

提前致谢。

这是Adaptive / responsive的演示 URL

第一次进入自适应主题，我刚刚阅读了这篇文章并查看了演示站点。

当我更改浏览器大小时，我看不到响应式和自适应的巨大差异。你能建议吗，有什么方法可以显示响应性和适应性的区别

我需要在 Bootstrap 中禁用响应式布局，但我遇到了一些问题。

我将元标记替换为：

并将容器中的网格初始化替换为：

但是我在我的代码中看到了一些小显示分辨率的错误：
http ://www.playground.obuh.by/

我做错了什么？

例如，我有两个块，如图所示。

如何使 Block2 中的元素与 Block1 具有相同的高度？

我对下面的响应式设计有疑问。

根据下面的代码和 js fiddle 中显示的代码，默认情况下，在桌面上，我希望锚点同时显示“名称”和“登录时间”。当分辨率低于 480px 时，“登录时间”不应显示在锚点中，而是应显示为 ul 中的第一个列表项。因此，为了实现这一点，我创建了一个额外的 li 作为第一个元素，它是隐藏的，当在桌面上并且分辨率低于 480 像素时，它就会显示出来并且锚点中的“登录时间”被隐藏。

我的疑问是，这是获得这个东西的正确解决方案吗，至于这个，我需要在 2 个地方复制“登录时间”html，尽管一次隐藏一个。

http://jsfiddle.net/M7J4q/2/

HTML：

CSS：

我有标准的“响应式图像服务”问题，但有一些复杂的曲折。我希望我需要为下面的问题构建自己的解决方案，但是几个月后我想我现在应该把它带到社区来寻求我的方法和入门方面的帮助。我还认为我正在寻找的解决方案将具有相当广泛的吸引力，因此这对整个社区来说可能很有价值。

问题：

• 我们希望为用户提供图像、嵌入视频等（任何需要大量时间/带宽来加载并且在较低分辨率时需要更少的内容），但会根据元素在页面上实际分配的大小来更改加载的尺寸. 这是适用于其他一些类型资产的基本“响应式图像服务”（尽管由于我们为移动设备提供较低带宽的文件版本，我认为这也属于“自适应设计”）。但是暂时不要担心其他类型的内容，让我们专注于图像。

• 我们需要为每个特定资产放置、每个屏幕宽度断点确定适当的最大宽度，而不提供此信息作为配置。

我正在创建一个平台，该平台将提供依赖于来自许多不同方的 HTML 模板的页面。可以从页面上的任何位置提供图像，并且页面可以使用它们想要的任何样式系统，因此我们仅通过查看屏幕宽度就无法知道图像的合适尺寸是多少。我们需要在每个支持的大小断点处实际评估放置的最大宽度。当然，这可以在给定设计模板的情况下提前手动完成，但我们假设这对这些第 3 方来说工作量太大。

例如，在 Twitter Bootstrap 3 中，当浏览器宽度 < 768 时，包含在 col-md-8 中的图像最多应为 720px 宽度，但如果它位于 col-sm-8 中，则它应该小于 470px。如果我们完全使用不同的框架，这些显然也会不同。我需要能够考虑 CSS自动执行的所有操作的解决方案，因为我不知道 CSS 会做什么。

• 在图像请求期间我们无法进行任何处理。我们依赖 CDN（Cloudfront）。他们不会在每个边缘位置实施我们的自定义代码，而且我不希望新德里或柏林的访问者必须在他们知道什么之前为每个大小的资产在全球另一端发送另一个请求最终的网址是。这样就排除了这种基于控制器的解决方案和PHP 自适应图像脚本之类的解决方案。

• 我们需要这个快速。服务器端有很大的回旋余地，因为使用 Rails 3 和 4 进行缓存非常容易和灵活。但出于性能原因，我们可能不能在每个元素上使用 jQuery.width() 。毕竟，我们提供响应式图像的全部原因是为了减少感知的页面加载时间。但我们确实可以访问 jQuery，如果需要的话，我们可能会一直加载 Modernizr（目前仅包括带有条件 HTML 的低 IE）。

• 我们对 User-Agent 标头的信任不足以将我们的浏览器宽度建立在它们之上。我喜欢 mobvious 1、2和它的朋友responsive-images背后的想法，但是在这么多不同的设备上有这么多版本的浏览器。建立一个真正可靠的系统来确定浏览器宽度，而不是直接使用 JS 计算它有多复杂？

• 没有 javascript（以及爬虫）的客户端将需要访问图像。这里最简单的解决方案似乎是在<noscript>....</noscript>内部包含图像的规范、最大版本。

解决方案 似乎这样做的唯一方法是：

• 让服务器传递所有可用的大小，然后使用 jQuery 以某种性能高效的方式计算客户端上每个元素的宽度（可能使用 $.css_width() 或某种专门的脚本）。所以服务器会创建：

<span data-respv-img-id="picture_of_unicorns"></span> <noscript data-respv-img-id="picture_of_unicorns" data-img-720- url="//cdn.example.com/assets/picture_of_unicorns_720x480" data-img-320-url="//cdn.example.com/assets/picture_of_unicorns_320x260" data-img-120-url="//cdn.example.com/assets/picture_of_unicorns_120x80"> <img src="//cdn.example.com/assets/picture_of_unicorns_720x480" alt="Magical unicorns"> </noscript>

如果我们在一个小屏幕上并且只有 120 个适合，JS 会将其变成：

<span data-respv-img-id="picture_of_unicorns"> <img src="//cdn.example.com/assets/picture_of_unicorns_120x80" alt="Magical unicorns"> </span>

• 或者让服务器进行某种预处理，这样它就可以准确地知道每个浏览器宽度上的每个位置都适合什么尺寸的图像，并提供：

<span data-respv-img-id="picture_of_unicorns"></span> <noscript data-respv-img-id="picture_of_unicorns" data-img-1200- url="//cdn.example.com/assets/picture_of_unicorns_720x480" data-img-1024-url="//cdn.example.com/assets/picture_of_unicorns_320x260" data-img-768-url="//cdn.example.com/assets/picture_of_unicorns_120x80"> <img src="//cdn.example.com/assets/picture_of_unicorns_720x480" alt="Magical unicorns"> </noscript>

我们最终会得到与其他方法相同的结果。但是这一次 jQuery 的工作要容易得多，因为我们将所有的大小调整工作都交给了服务器。但这需要在服务器端加载完整的浏览器堆栈来生成每个请求。缓存没问题，但肯定会带来很多复杂性。

请注意，这两种解决方案都允许基于滚动的图像加载，这是我需要实现的另一个方面，但我们现在不需要讨论。

长话短说：您会推荐哪种方法？你能想出更好的方法吗？