问题标签 [responsive-design]

这基本上是我之前问题的延续。

看到我的固定元素不会在响应式环境中发挥作用，我需要以某种方式将一个小的导航菜单绝对定位到包装器。当窗口缩放时使用包装器缩放，但在滚动时保持固定在顶部。

我想这可以使用 jQuery，但我不确定如何去做。

投票结束的人不具建设性，请阅读全文。具体问题在最后。寻找现实世界的例子和方法。

语境

随着智能手机、平板电脑等众多设备越来越多地用于访问网络，计划、设计（响应式）和开发（尤其是您的前端）非常重要，以便为设备提供快速和量身定制的用户体验。

有一些令人惊叹的网站正在建设中。查看mediaqueri.es（调整浏览器大小）

我们看到诸如

• 首先是大屏幕，然后是较小的设备。
• 移动优先，然后是媒体查询，为更大的屏幕增添趣味。
• 使用不同技术的设备检测（包括服务器端）
• 并为设备提供完全不同的标记和内容。

问题）

你们今天在外面做什么？你为什么选择你的方法，最重要的是，如果它不是解决这个问题的最有效方法，那是什么？

我正在寻找的东西：

• 它是纯 CSS / JS / HTML 方法，还是服务器端，或组合 - 为什么？
• 每个设备只获得它需要的资源（图像等），因此它运行良好
• 站点的维护更容易，即添加/更改功能不是一个巨大的痛苦
• 一些代码示例总是有用的
• 让我们省去像 ie7 及以下的旧浏览器

我正在构建一个网站，该网站需要根据设备的屏幕尺寸具有不同的移动布局，但我不想为每个设备设计全新的布局。所以我想知道是否有一些事情我需要注意不能很好地转换为移动布局？或者如何设置原件以很好地扩展到更小的设备。非常感谢

我正在试验基础。链接： http: //foundation.zurb.com/docs/index.php

我有一个非常简单的 Div：

当我将高度设置为 190 像素时，无论浏览器大小如何，它都会显示 190，但是当我将高度设置为 100% 时，它只显示 50 像素的图像。我在当前站点中使用了很多将成为背景图像的东西，但我也希望这些高度响应。我如何做到这一点？

我希望下拉菜单的一些 jQuery 函数仅在屏幕尺寸低于 768 像素时运行，并且如果它高于该值，则运行不同的下拉菜单函数。我将如何在 JavaScript 中执行此操作？

我正在创建一个响应式网站，并且刚刚注意到在 iPhone 上查看我的内容页面时出现了奇怪的行为。在纵向模式下加载时，它可以正确缩放，并且在旋转到横向时也可以正确缩放。但是，当旋转回纵向时，页面似乎向左移动，或者无法正确缩放，并且在右侧下方有一条空白区域。当用户可以向左滑动页面时，这个空白似乎也出现在第一次纵向加载时

这里没有使解释进一步复杂化，而是指向发生此行为的示例页面的链接。在 iPhone 上查看，然后查看没有此问题的主页。

如果您需要进一步了解，只有我知道 :)

如果您将 ipad 位置从纵向更改为横向视口比例将是错误的（站点对于视口来说太大了）。我搜索了很多，在lessframework.com上发现了同样的问题

看看 - http://www.youtube.com/watch?v=MGDjaE-eKAY

但是在stuffandnonsense.co.uk/projects/320andup/上没有问题

我不知道是什么让 320andup 正常工作，而 lessframework.com 在 ipad 上工作不正常。

有任何想法吗？

我也开始建立一个适用于移动设备的网站。所以我也开始研究媒体查询和各种网格框架。我查看了所有“主要参与者”，例如 Inuit.css、语义网格等，发现对我来说最好的可能是无框网格

作者说它是“ Less Framework的精神继承者”：

行。我已经研究了很多主 framelessgrid.com 页面的所有 less/css 代码和 html 代码（应该实现无框网格），但我无法弄清楚我如何真正实现它。

• 首先，他所说的“无框”究竟是什么意思？只是它不是一个框架？除了拥有自由列宽和“倒置”媒体查询以“移动优先”之外，它与 lessframework 有何不同？

• 我应该如何准确地使用 .less 变量（尤其是 @cols 系列）？

• “逐列调整，而不是逐像素调整”是什么意思？意思是？应该如何将这一概念付诸实践？

:)

在阅读Not Your Parent's Mobile Phone: UX Design Guidelines For Smartphones - Smashing Magazine时，在“数据传输和定价”部分中，以下内容引起了我的注意：

最近有很多关于响应式网页设计的说法。这种方法确实在最小化数据传输方面带来了一些挑战。Jason Grigsby 对细节有很好的描述。总而言之，CSS 媒体查询——响应式设计魔法的一部分——几乎没有减少向移动设备传输数据的开销。调整大小或隐藏不需要的图像仍然需要将完整图像下载到浏览器。此外，诸如 JavaScript 库之类的资源可能会在没有为用户启用的情况下下载到移动设备。

当我阅读 Jason Grigsby 在 Smashing mag 文章中提到的长篇文章时，我想知道是否有人遵循一些最佳实践来避免此类问题？

我开始构建一个应该响应不同屏幕尺寸的网站。我正在使用 Fluid Baseline Grid 模板，该模板使用列的百分比并使用媒体查询根据屏幕大小进行调整。现在我正在添加自己的自定义 CSS，我想知道是否应该使用像素、百分比或 em 来定位我的元素（在流体网格元素内）。例如，div 之间的边距和填充、输入字段的宽度等。字体大小和行高是使用 em 进行测量的唯一设置。

任何人都可以对此提供任何指示吗？目前，我倾向于仅在网格模板预设的基于百分比的布局中使用像素。