问题标签 [responsive-design]

我正在为 Wordpress 构建响应式主题，但遇到了响应式图像的问题。问题是我需要更改内容内图像的大小。我的逻辑确实说我应该为此使用过滤器，但我找不到专门针对图像的过滤器。我的第一个想法是为此使用 JS库，但这个特定的库想要获取大小图像的名称，并且由于我的网站使用一些自定义媒体尺寸，我没有找到正确获取小图像名称的方法.

另一种方法是使用css

但我需要做的是从 img 标签中删除宽度和高度属性。

所以基本上这两种方法都需要我浏览内容并解析出图像标签，然后用新生成的标签替换它们。

我在不同的插件源中进行了一些挖掘，发现它们过滤了 the_content 并仅使用正则表达式来查找 img 标签并将它们替换为新的。

因此，我正在寻找一种解决方案来使这项工作以正确的方式工作，因为我觉得通过整个内容来替换图像并不是正确的方式。如果没有更好的方法可以有人请帮助我解决我的小问题的代码（尤其是正则表达式）。基本上我需要搜索 img 标签并删除宽度和高度属性。

我一直有点困惑响应式网页设计如何与960.gs等 CSS 网格系统一起使用。

Nathan Smith（创建者或 960.gs）不久前提出了 adapt.js，并通过检查捆绑的样式表（mobile.css， 720.css和960.css等等），很明显网格的数量列未受影响，只有各个列的宽度和它们堆叠在一起的方式发生了变化。

另一方面， 978.gs似乎遵循不同的模式：

• 300px 网格有 8 列
• 748px 和 978px 网格都有 12 列
• 1218px 和 1378px 网格都有 16 列

起初，我认为这没有多大意义，所以我与开发人员讨论了它。他回答说服务不同的 CSS和根据设备宽度不同的标记是常见的做法。

这种方法对我来说仍然有点奇怪，因为如果您愿意重写整个 HTML 标记，您不妨使用相同的网格系统（例如 16）并将所有.grid_{x}类更改为.grid_{x*2}为适应更小的屏幕......正确的？

adapt.js 方法似乎更容易实现和管理，但我也可以发现一些警告：图像或文本片段如何很好地适合grid_3类？因为它的宽度可以从auto,220px到 甚至610px在2520.css？

那么，目前关于响应式网页设计和网格系统的最佳实践是什么？CSS 媒体查询是否应该影响网格（列宽）？事实上，我倾向于相信最好的方法可能是提供单个标记和样式表，并让浏览器进行渲染/缩放。

我对此很陌生，因此感谢您提供任何帮助-谢谢。

我正在开发一个响应式电子商务网站。这相当艰难，但我喜欢它:)

对于购物车，我决定在货架上显示产品类别，并在叠加层中显示单个产品。

看这里

问题是几乎不可能以体面的方式设置它们的样式，因为我不知道它们中有多少，也不知道查看器的窗口有多大。

我可以使用什么模式来显示这个可变长度的数据，我将如何完成它？

因此，我正在开发我的第一个响应式网站，该网站广泛使用媒体查询。我想知道是否有一些我应该优化的常见页面宽度。

我可能会有一个最大宽度（不会完全流动） 我想我可能会有 3-5 个设置宽度，它们之间有有趣的小 CSS3 过渡（类似于CSS Tricks的工作方式）。

目前我使用的数字有些随意：

另外，我想我已经读到某些移动设备的行为与预期不符（带有@media）。这在哪里发挥作用，我应该如何处理这些情况？

我正在尝试使用新的响应式框架来构建我的网站。我已经做了一些测试，并且按照标准，我已经在一个非响应式网站上使用了一个效果，这是一个 Jquery 翻转，我使用一个精灵来让我的图像变成灰色/颜色，并且在翻转时，灰色会随着颜色褪色带有在悬停时打开和关闭图像的文本。

我的问题是，如果我调整它，因为我在响应式网站上的图像没有固定的像素高度，图像显然显示图像的灰色/彩色面。如果我尝试做一个 % 高度和宽度，显然这不起作用，因为它会按比例缩小，因为它很快就会开始显示图像的错误部分。

有谁知道我该如何解决这个问题，我需要一种响应方式来为我的缩略图产生这种效果。我会上传一个示例，这样你就可以看到我到目前为止所得到的。

我的jQuery：

我在这里做基本的事情，我对 Jquery 没有信心。关于适应这一点的任何想法。

编辑**： http: //www.visualdecree.co.uk/test/index.html - 展示一个快速拼凑的测试页面。希望能帮助你展示我在做什么。

问候米

我正在尝试使用 Adactio 解决方案在创建响应式设计时更改内容流 - http://adactio.com/journal/4780/ 但在 Firefox 中获得一个按钮，您不能再通过页面中的链接进行标签，有关示例，请参见http://jsbin.com/axobun 。

谁能想到替代解决方案或解决此问题？

我正在构建一个响应式网站，但不想只隐藏小屏幕的元素，我想完全删除它们以减少加载时间。

到目前为止，我已经完成了这项工作

该类.widescreen被添加到所有仅加载在大于 768px 的屏幕上的元素中

然后，如果用户调整浏览器窗口的大小（或将设备旋转 90°），我希望它能够工作，所以我尝试了这个：

哪个有效，但仅在调整窗口大小而不以较小尺寸加载时才有效。我猜这会发生。

有没有办法实现这一点，以便在加载页面和调整浏览器窗口大小时都可以工作？

然后，当然，诀窍是在窗口大小调整为超过 768 像素时重新添加内容！但是，如果第一部分实际上是可能的，我会尝试弄清楚！

我正在设计一个类似于 Comcast 的列表页面的布局：http: //xfinitytv.comcast.net/movies

如果您调整窗口大小，您会注意到右侧通常有一个空白区域，而此时没有足够的空间放置另一张海报。我想创建一个总有完美贴合海报的布局（右侧没有空间）。

问题是我不能将基于百分比的宽度应用于海报，它们保持在 180 像素的固定宽度。我的理论是使用基于百分比的边距和媒体查询，但是有以下挫折：1）海报艺术并不总是粘在右边 2）我必须使用太多的媒体查询。只是感觉不对。

理想情况下，它会像这样工作：如果屏幕尺寸在 x 和 x 之间，那么一排有 8 张海报。如果屏幕尺寸在 x 和 x 之间，则连续有 7 张海报……以此类推。海报之间的所有空间都将均匀分布在边缘。这样，我们使用媒体查询式的解决方案来显示 x 个海报艺术，并使用 jquery 来计算和分配边距。总会有合适的海报，总是在屏幕的最右边结束。

关于解决此问题的好方法有什么想法吗？它必须在调整浏览器窗口大小时工作（不仅仅是在页面加载时）。

转向响应式设计，我将 %s 用于图像，例如：

这很好用，但在 Internet Explorer 8 及更低版本中除外。这是因为height: auto它是 CSS3 的一部分，只有 IE9 以后才支持？

最重要的部分......关于解决这个问题的任何建议？到目前为止，我唯一能想到的就是给它一个最大高度。

谢谢

我可以轻松地在帖子中制作响应式图像，但是在获取自定义帖子类型拇指以执行相同的 b/c WP 自动插入宽度和高度时遇到问题。我正在寻找一种至少覆盖它们的默认宽度/高度的方法。有人碰巧有解决方案吗？

提前致谢！-j