问题标签 [responsive-design]

节日问候堆垛机。我使用 IE7 和 IE8 的 respond.js polyfill 和 html5.js shiv 完成了一个带有CSS媒体查询的响应式站点。当我第一次在这些浏览器中加载页面时，在正确的字体样式开始之前，会有短暂的大尺寸文本闪烁，有时在 Times Roman 中。有没有其他人看到这个问题，或者任何人都可以建议我做错了什么？我没有使用网络字体。我在 ems 中调整字体大小。我尝试将我的正文字体设置为 10px 和 62.5%，但似乎没有什么不同。这是 Respond polyfill 的特性吗？

祝大家欢呼

随着响应式设计和移动 Web 开发成为常态，就像我怀疑的其他人一样，我发现自己在各种移动和手持设备上进行测试和错误修复。传统上，使用诸如 firebug 或 chrome 开发工具之类的东西可以更容易地修复 CSS 中的布局或呈现错误。甚至可以在这些工具中提取和调试 JavaScript 错误。

但是，现在隔离和修复相同类型的错误要困难得多。我们不再有错误控制台来查看何时发生 JavaScript 错误，我们没有检查器（上帝，我希望我们在所有现代移动浏览器上都有远程调试）。我在 Opera 中有一个烦人的错误（我知道可以远程调试：http ://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly ）并且我已经解决了其他问题Android 浏览器和 iOS 版 Safari 通过蛮力而不是任何真正的技术，但我只是想知道在移动设备上调试响应问题的首选工具、技术和技巧是什么？

谢谢

简而言之：

在进行响应式网页设计时应该使用一个还是多个样式表？

详细地：

在响应式设计中，您倾向于拥有一个主要的 CSS 块，然后在达到某些断点时调整布局的其他零碎部分。您可以通过以下两种方式之一来构建代码：

单一样式表

多个样式表

似乎使用一个样式表会减少 HTTP 请求的数量，但是您将拥有一个更大的文件，其中包含某些客户端可能不会使用的代码。多个样式表似乎可以减小文件大小，但是您有更多的 HTTP 请求。

您应该何时选择每种方法？在实践中，HTTP 请求数量和文件大小的优缺点如何叠加？

目前我正在使用这个：

HTML：

CSS：

这里的优点是我根本没有使用任何 Javascript。但是，当在不同的屏幕上查看时，绝对定位的元素会变成一场噩梦。

目前我的解决方案是根据不同的屏幕尺寸编写和定位这些元素（例如，1024x768 的 id 内容的最高值为 10px，而 1280x800 的值为 top:25px; 等等..）并将它们存储为一个单独的 css 文件，以便我可以在页面加载期间加载适当的 CSS。我觉得这很耗时，也可能效率低下。使用百分比值是我尚未探索的选项。如果您知道一个优雅的解决方案，或者 about.me 的大佬们是如何做到的，那将会有所帮助。

谢谢你。

我正在制作 Fluid + 响应式布局，其中布局在浏览器/屏幕重新大小时上下缩放。

如果我使用font-size的body是% 百分比，那么它em适用于所有事情，

• font-size
• width
• margin
• padding
• border-width
• border-radius

或者我应该em只用于font-size？

我的目标是在事情扩大和缩小时保持一切成比例。

我什么时候应该使用什么时候有点em困惑%。我font-size的身体是62.5%

我正在尝试在我的网站上实现响应式设计，但我在特色内容滑块上有点卡住了。

我将Coda Slider用于我的特色内容幻灯片，对于小屏幕宽度，我希望中止滑块的 jQuery 函数并删除幻灯片函数的内联样式，以便它简单地显示块.

我很确定我以前见过这样的示例，但是当我刚刚浏览我的书签以在此处发布示例时，我真的找不到任何实际上看起来像这样工作的示例。也许是因为 JS 的限制会使这不可行？

这是我用来实现滑块的 jQuery。有什么我可以简单地添加的东西可以告诉它中止并在特定尺寸以下的屏幕宽度下恢复正常吗？

现在我只是在头部使用两个通过媒体查询实现的样式表，如下所示：

因此，我希望 JS 中止与启动的移动样式表相对应，基本上我将仅使用 CSS 呈现内容，而不使用任何 JS 演示动画等，例如滑块用于整个站点。

所以我已经使用 max-width 属性缩放了特色图像，但我想知道是否可以在导航图像图标上实现相同的效果？这可以用图像精灵来完成还是推荐的方法是什么？

我已经搜索并尝试了几种响应式/自适应图像的技术，但我发现它们中的大多数会干扰 html5 缓存清单。

我想就这种方法是否是一种好的做法提供反馈（注意：它确实会延迟下载图像，直到脚本运行，但可以防止图像资源的双重下载）

典型的html：

的JavaScript：

我正在修改其他人的 css，并尝试通过实现 @media 查询来使页面响应。我实现了：

效果很好，但是当我实现 @media screen 和 (max-width: 600px){} 时，它似乎不起作用。

或者 - 在 chrome 和 opera 上似乎工作得很好，但在 FF 上却不行：在 FF 上，页面在右端被剪切，没有滚动条，我真的不知道为什么。即使我使用位置：相对，它也不会改变，我检查 - 我没有任何“溢出：隐藏”。

另一件事 - 对于媒体查询，建议使用 min-width - 但如果我使用 min-width，则只应用最低的（例如 min-width:600）。

我想我在这里错过了一些东西......有什么建议吗？我真的很感激他们......因为我非常热衷于响应式网页设计。

我目前正在开发一个 RWD 网站，在 iPhone4 上进行测试时，我发现普通日期被“视为”电话号码 - 因此可以点击。我不要那个。

这是一个挪威网站，日期格式为：DD.MM.YYYY（8 个数字）。挪威电话号码也包含 8 个号码。

例如：日期 23.11.2011（2011 年 11 月 23 日）。在 pc 和 android 上，这给出了正确的日期 CSS，但 iPhone 将这些显示为“链接”。单击 iphone (iOS) 时会提示我一个通话对话框“23 11 20 11 - 通话或取消”。为什么？

真正奇怪的是，这并不一致。以这段代码为例：

<span class="pubDate">(Published: 24.10.2011, Last changed: 02.12.2011)</span>

在我的 iPhone 上，只有最后更改日期是可点击的，而不是第一个。有谁知道让这些 iPhone 无法点击的方法？