问题标签 [responsive-design]

我目前开始对我的网站使用响应式方法。我发现http://fluidbaselinegrid.com/是最好的样板文件。但是对于我尝试过的每个样板或网格，当您从纵向模式切换到横向模式时，我无法让 iPhone 或 iPad 识别媒体查询。

它总是在您加载页面的方向上加载正确的 css。但是当您从纵向转到横向时，它会挂起并且无法正确调整大小。

您甚至可以在http://fluidbaselinegrid.com/上看到这种情况。

有谁知道这是否是我们现在必须忍受的移动 webkit 的一个怪癖，或者有没有办法解决这个问题？

我正在寻找一种使用 HTML5 显示图表并完全响应屏幕分辨率的方法。如果您有其他不使用 Flash 的东西，我愿意接受建议。

另外，我希望能够创建这些图表：

• 饼状图
• 水平/垂直折线图
• 国家图表（如果可能）

谢谢

我想我可能已经知道了这个问题的答案，但我需要进行健全性检查！

说我有

我可以使用 RESULT=TARGET/CONTEXT 将宽度更改为百分比。在这种情况下，上下文是一个最大宽度设置为 1000px 的容器，所以我可以这样做：

如果我将窗口缩小，则 div 将始终与其容器成比例。但如果我想做

我可以根据现在的目标是 570 来计算宽度，但是随着窗口的缩小，比例都会不同步。

我不能使用百分比边框。我不想使用 JS 继续检查上下文，我还不能使用 CSS3 box-border 声明。

如果我想使用 Ethan Marcotte 在响应式网页设计中描述的技术，在这种技术中，一切都相对于彼此缩小，如果使用边框，我会不走运吗？

干杯!

我正在使用jQuery Backstrech 插件将全尺寸背景图像实现到响应式网站。

我希望 jquery 代码仅适用于手持设备，或者仅适用于小于 480 像素的视口......可以做到吗？

这是我用来实现脚本和背景图像的代码：

我如何添加某种 jQuery 条件来使此代码为具有 480 像素或更少像素的客户端执行？

提前感谢您的帮助！

我正在构建一个使用 David DeSandro 出色的 Isotope 插件的照片博客，但我目前在让插件在响应式/流体网格中按预期工作时遇到了一些困难。

www.lewismalpas.co.uk/tumblr（演示）

每个图像都包含在一个 div (.item) 中，其显式宽度为 25%，因为图像很灵活，理论上应该允许内联显示四个图像，但是目前只显示两个图像，我似乎无法找出问题所在。

简要地：

如何在 CSS 中布置 N 列随机高度的 portlet，以便如果调整浏览器大小，减少列的数量（使用 @media (min-width:)）并且 portlet 仍然很好地放在页面上没有间隙。

这类似于将 多个固定宽度/可变高度框浮动到 2 列中 ，但更通用。

细节：

我已经构建了一个 Web 应用程序（PHP / Zend 框架），其中包含一个由一系列 portlet 组成的“仪表板”页面。Portlet 可以在流畅的布局中排列成 1、2、3 或 4 个等宽列（用户可选择）。当用户调整浏览器窗口的大小时，列会扩展以填充可用宽度，portlet 也会水平扩展。每个 portlet 的垂直高度由其内容定义。有些只有 1-2 行，有些可以是 30-40+ 行的文本/表格/图像等。

我想把它变成“响应式设计”，这样用户就不必选择列数。在小屏幕（例如 iPhone）上，只会显示一列。在宽屏幕上，它们可能有 4 或 5 列。如果调整浏览器窗口的大小，列数将向上或向下调整以允许 portlet 保持大约 300-400 像素宽。

我想我可以用一点 jQuery 和一些服务器端支持 (PHP) 来做到这一点，但如果可能的话，我更愿意在 CSS 中完成这一切（没有/最少的 javascript）。

我已经开始设计一个摄影网站，并在左上角添加了一个绝对定位的标志。该区域由绝对定位的 div 和 div 内的图像组成。

我想知道是否可以根据屏幕尺寸缩小绝对定位的 div 和徽标。

有没有人可以帮忙？这是链接，因此您可以看到我正在处理的内容：

http://www.photographybytaraandclaire.com/newsite/index.html

遵循响应式网页设计的原则，Skeleton 可按比例缩放以适应移动浏览器。Bootstrap 是否提供相同的功能？

如何在响应式布局中处理 Adsense 横幅？

据我从 Adsense TOS 中可以看出，我几乎不允许在客户端对横幅做任何事情，所以如果它的分辨率较低，我不能在客户端将横幅切换为较小的横幅.

似乎我能找到的唯一解决方案是只提供以最低目标分辨率（即 300x250）工作的横幅。

有人有更好的主意吗？

我的 css 中有两个媒体查询（不包括打印的）： @media screen and (min-width: 720px) {}和@media screen and (min-width: 1026px) {

我正在使用 respond.js 让它们在 IE8 下运行。奇怪的是它工作得很好，除了最后一个媒体查询，它在媒体查询之前恢复到 css。即，在窗口的宽度达到 1026px 阈值之前，它运行良好。

有人知道那里发生了什么吗？这是预览的链接：http: //bit.ly/i6ITPe

非常感谢您的任何回答