问题标签 [adaptive-design]

我在少数项目中使用 SMACSS，但通常会面临一个问题——构建自适应内容模块的正确方法是什么。

例如，我有 LAYOUT 网格类（.container、.row、.span-1、.span-N）+ 用于自适应设计的媒体查询。

我想对内容模块使用相同的规则来管理自适应行为，例如将链接列表分成列：

我可以管理它向 MODULE 元素添加 LAYOUT 类，如下所示：

但是这种方法在 LAYOUT 和 MODULE 之间建立了紧密的耦合，打破了 SMACSS 的主要规则，该模块应该独立于 LAYOUT。

另一种方法是构建特殊模块（.adapt），并将内容模块放入其中，如下所示：

这种方式不违反规则，但 HTML 标记看起来超载。

那么问题来了 -您在 SMACSS 中构建自适应内容模块的方式是什么？

MVC 有一个您可以在项目中引用的 dll，名为“system.web.webpages”，您可以使用它在 global.asax 文件的“application_start”方法中执行自适应渲染，如下所示：

Web 表单中是否有类似的功能？

如果可能的话，我不想使用 Mobile 母版页创建单独的 Mobile 文件夹并签入 preinit 事件并切换到呈现我的移动版母版页。对于检查特定类型的移动设备等，显然没有那么灵活。

我正在使用 mmenu ( http://mmenu.frebsite.nl ) 创建我的移动菜单。我像这样实现我的 jQuery 代码：

我想，当我的浏览器窗口小于 720 像素时，设置dragOpen为true，当我切换回正常分辨率时，将其设置回false.

任何帮助是极大的赞赏。

谢谢

是否可以选择将Foundation 4 Reveal与图像一起使用，但仅在使用单击元素打开模式时才加载它们？

我的目标：创建一个带有 Interchange 的自适应灯箱；当用户单击缩略图时，它将利用自适应图像交换的优势全屏显示图像，因此较小的图像将加载较小的屏幕，较大的图像将加载较大的屏幕分辨率。

我有一个网页，其中包含一个侧边栏链接，当用户垂直滚动页面时，该边栏应该保持可见。我怎么能

• 以合理的方式使页面适合移动设备的屏幕（例如，调整大小以水平填充屏幕）和
• 保持垂直滚动时侧边栏保持可见的设计？

在当前实现中，内容不会调整大小以填充移动设备的屏幕，并且当用户放大时，尺寸栏不会出现在合理的位置（在两个标准的 Android 浏览器上测试）。非常欢迎对实施的其他评论或批评。谢谢！:)

我在使用自适应图像时遇到了问题。( http://adaptive-images.com )

我已经让 AI 在本地和在线运行了好几个月，完全没有遇到任何问题。就在这个周末，我尝试用与原始图像相同目录中的新 png 图像替换页面上的图像，之前的图像是 jpg。新图像根本不会在本地版本上加载（它适用于在线版本），控制台显示：

加载资源失败：服务器响应状态为 500（内部服务器错误）

这些是我试图解决这个问题的步骤（所有这些都没有奏效）：

• 检查并再次检查，文件的路径。如前所述，唯一的区别是这是一个 png 而不是 jpg 文件。
• 再次添加了相同的 png 文件，但名称不同。
• 从 Photoshop 创建了一个完全不同的 png 来使用。
• 检查是否在 ai-cache 文件夹中创建了 png - 它不是。
• 创建了一个未通过任何优化软件（如 imageAlpha 或 imageOptim）的全新 png 文件 - 认为这里的某些东西损坏了文件。
• 在不同的浏览器中查看。
• 重新启动 MAMP 服务器。
• 重新启动 Mac。
• 重新安装 MAMP。
• 喊道。

这是我尝试过的有效的方法：

• 用原始和新的 jpg 替换图像。图像加载正常，并在 ai-cache 中创建了一个版本。
• 使用 .htaccess 文件禁用自适应图像 — png 文件都按预期加载，但当然 AI 不再运行。
• 使用 jpg - 不理想，因为图像需要透明度。
• 编辑：使用 8 位 png 有效，但我更喜欢 24 位仍然没有运气。

这是我发现的一件有趣的事情。我使用了一个不是用 Photoshop CC 创建的 png 文件（标准截图）。在本地安装上，图像显示正常。但是，在 ai-cache 中不会创建较小的版本。使用与在线设置相同的屏幕截图文件，图像也显示良好，并且还在 ai-cache 中创建了一个版本。

还值得指出的是，我从 Photoshop CC 创建的所有 png 文件在直接打开时也可以在浏览器中很好地查看。我也有以前用 Photoshop CC 制作的 png 文件，这些文件仍然显示良好，并且在 ai-cache 中有版本。

我有点不知道下一步该往哪里看，我似乎唯一推断出的就是 Photoshop 的 png 文件中一定有一些东西不能正确读取。但我不明白的是，据我所知，在过去的几天里，安装/文件（MAMP、Photoshop、自适应图像、htaccess）都没有被更改/更新。

任何帮助或建议将不胜感激，谢谢！

如果需要，下面是我.htaccess文件中的自适应图像代码：

我正在使用自适应图像的标准安装，但如果您还没有看到其中包含的 php 文件，则如下所示：

我正在为将处理所有图像请求的 Web 项目编写图像服务器。这个想法是一个最大分辨率的图像（例如，让我们说 3000X2000）将存储在文件系统中。当图像请求来自客户端时，将找到适当的文件，然后调整大小以匹配客户端尺寸并返回给浏览器。分解它：

1. 从客户端请求并被捕获所有 servlet 捕获的文件
2. 屏幕尺寸已存储在客户端 cookie 中。
3. 在文件系统上找到最大文件。
4. 调整图像大小以匹配用户尺寸。
5. 缓冲的图像返回给浏览器。从来没有保存过。

这当然只是一个想法。它使我不必为项目中使用的每张图像保存 5 种不同的图像尺寸，但这是一种现实的方法吗？这是否被任何主要站点用于生产？如果有数千个请求进入大规模，这会导致内存问题吗？文件返回到浏览器后应该立即释放内存吗？

该文件将返回给浏览器：

一些仅使用基本 Java 调整大小工具的测试显示速度以毫秒为单位，因此理论上这是可能的，但它当然比预先存储调整大小的图像需要更长的时间。也许能够提供与请求的屏幕尺寸完全正确尺寸的图像将否定稍慢的图像请求？

我如何适应和精确拟合（即高度和宽度两者）以适应不同的分辨率？如何根据屏幕分辨率缩小图像元素，保持它们的纵横比和定位，如左、上等。请帮助我——我应该采取什么方法。为不同的分辨率制作不同的图像是唯一的选择吗？

请检查参考我想要类似的结果。每个元素都很好地适应每个分辨率 - blacknegative.com

使用 HTML 和 Jquery！！！

我在我的concrete5 5.6.2.1 站点上安装了adaptive-images.php ( http://adaptive-images.com )，当浏览器加载图像时，它不会引起任何问题并且似乎会触发。但它不会替换 src 属性。

有问题的图像位于由 ProBlog 包控制的博客文章中。具体5（ProBlog？）似乎将其自己的 src 属性放入缓存的图像。我假设在adaptive-images.php 完成它之后。

也许不吧。

有没有人用这个设置成功？我还需要寻找其他地方吗？

鲍勃

不幸的是，我用来发送电子邮件的程序不允许@media 查询，也不允许在所述代码顶部使用 .css 列表。这是有问题的，因为我正在构建一个基于浮动列的电子邮件模板。我希望在平板电脑或台式机上查看时这两列彼此相邻，但在移动设备上查看时将列表放在内容面板下方。

这是我所拥有的基础：