问题标签 [responsive-design]

我在 Internet Explorer 8 中的流畅布局（使用最大宽度：100% 的图像）遇到了一些问题。当我想将锚标记包裹在灵活宽度的图像和边距、填充和边框周围时，问题就出现了参与其中。这比你想象的要难一些。

所以 HTML 大致是这样的：

和造型：

所以我所拥有的是一个流动的图像，被一个带有填充和边框的锚包围。

以上是好的，除非图像小于容器。在这种情况下，锚点的内边距和边框会超出图像（填充容器的整个宽度）。

因此，让我们尝试一些方法来强制锚点适合其内容：

好的，现在锚框没有比图片大，但是锚标签在 Firefox、Opera 和 IE8+ 中又回到了不灵活的状态。但它确实触发了 IE7 中的布局，因此已经处理好了。接下来：

现在锚点又灵活了，但是当图像开始缩小时，它比容器大12px。锚点根据图像计算宽度，然后添加边框和填充。出于某种原因，Chrome 和 Safari 不这样做。无论如何，备用盒子模型来救援：

现在它在 Firefox、Chrome、Safari、Opera、IE7、IE9 中按预期工作，但由于某种原因不能在 IE8 中工作。在那里，锚仍然延伸到容器之外。我有点不知道该怎么做，因为box-sizing: border-box应该在 IE8 中得到支持。

我有一个 JSFiddle 页面可以隔离问题http://jsfiddle.net/3gkXU/22/

作为最后的手段，我可​​以使用 JavaScript 来检测锚是否大于其父元素，然后display: block在人们不太可能调整浏览器大小的假设下切换它。我不反对，但这里有 CSS 解决方案吗？

我正在尝试将 Superfish jQuery 插件与 Nathan Smith 的 adapt.js 片段结合起来，该片段根据浏览器宽度动态加载到不同的 CSS 文件中。我想在移动模式下禁用/替换/某些 Superfish 菜单，因为下拉菜单在那里没有任何意义。我试图检测更改并禁用菜单，但是当窗口再次调整宽度时我需要重新启用它。

这是我所拥有的：

基本原理是更改 html 元素的 id resize（介于pagesize_0和pagesize_1- 之间），并在 CSS 中使用后代选择器来禁用菜单，但这不起作用。我尝试重新运行sfMenu()（resize上面未显示代码），但它似乎没有检查更改的 DOM，意识到pagesize_1不再存在，然后优雅地失败（我认为这会达到我想要的效果）。

有什么想法吗？理想情况下，我想破坏superfishresize-to-mobile 上的功能，然后在屏幕再次变大时重新恢复它。

我目前正在构建网站的移动版本。

不是一个单独的域（mobile.example.com），而是一种响应式方法（使用媒体查询加载某些 CSS 以适应屏幕大小）

但是，我似乎无法弄清楚如何减少“页面大小”。

我的站点的桌面版本包括一个 jquery 滑块插件，它可以在五个相对较大的高分辨率图像中滑动。我的移动端不包括那个。但是，这些图像会在构建移动版本时继续加载。

我已将它们的显示属性设置为无，但这仍然会加载图像。

那么，无论是通过 javascript 还是其他类型的媒体查询，我怎样才能指定应该加载哪些文件，不应该加载哪些文件呢？

我有一个设置为 amax-width:780px且高度未声明的容器。在容器内，有一个图像幻灯片。页面上的所有内容都是响应式的，因此随着宽度的减小，图像（宽度设置为 100%）会调整高度容器。

幻灯片将图像更改为不再“保持打开”容器的图像，因为它不被视为容器的display:static;内容 position:absolute;

是否有任何创造性的解决方案来获取绝对定位的子元素的高度？

下面的示例在主容器上没有声明任何高度.. 没有任何东西将其保持打开状态。 http://dhut.ch/test/santos/

谢谢！

您可以在http://www.taramenconi.byethost11.com/上查看我的网站。我为 1024 x 768 设计了它。我还注意到，在某些屏幕上，它看起来只是被拉伸了很多......我特意创建了背景来填充更大的浏览器，但我希望内容区域保持相同的大小。我该如何解决？

这是我的CSS：

我正在尝试构建一个流畅的布局，为此我正在设计大图像的样式：

这很好用，问题是我不能再在 html img 标签中使用 width 和 height 属性（它们没有效果）。我需要这些属性，以便浏览器可以在加载图像之前“保存”图像所需的空间，因此在加载图像时页面的其余部分不会移动。

有没有办法同时拥有这两个功能？（流体图像+图像加载前节省的空间）

我使用 960 网格系统制作了一个网页。根据 www.alistapart.com 中的优秀建议，我已经做得很好并且反应灵敏

因此，在为我的新网页开发 CSS 时，我不断检查Dreamweaver 的多屏幕视口测试选项，发现我的页面在较小的屏幕上堆叠得很好。没有微型文本，不需要捏和缩放。

然后在现场测试页面时，我了解到 Ipad 和 Iphone不会调整窗口大小，我只能获得全屏网页的小型化版本。

我希望有一种简单的 CSS 方法来覆盖它，以便我的网页在苹果设备上也以响应方式堆叠。

我计划为站点使用网格系统，但我希望能够有选择地打破网格。例如，这意味着将OOCSS size1of2转换为size1of1)。理想情况下，html 看起来像这样：

然后我会有类似以下css的东西：

有谁知道用 OOCSS 或其他网格系统来做到这一点的方法？我正在寻找这种级别的控制，而不是更简单的响应式网格。

我在花车上遇到了一些麻烦。我正在玩一个网站，我想使用媒体查询对不同的浏览器宽度做出一些响应。当它坐下时，页面显示 HTML 流，但是当浏览器加宽时，我希望 blockquote 包裹到 img 的右侧，但它只包裹到它之前的 p 元素。

这是HTML：

这是我的 HTML 和 CSS 外观的示例：http: //jsfiddle.net/tempertemper/MZWD9/12/

我希望扩大范围的网站在这里：http ://tempertemper.net/portfolio

我确定我遗漏了一些明显的东西，但我无法弄清楚它是什么，我开始怀疑 float 是否只浮动两个相邻的元素。我想我可以在 img 和 p 标签周围放置一个 div，但我想让我的 HTML 保持整洁。

所有元素都有一个宽度，并且块引用绝对适合包含元素（即 li 的宽度足以包含所有元素及其填充、边框、边距等）。我已经尝试将所有元素都向左浮动，禁止我向右浮动的块引用。尝试对块引用之前的元素使用 clear:left。没有喜悦。

任何人都可以让我正确吗？

谢谢，

马丁。

我正在构建一个编辑器，将帖子的内容加载到 div 中，并且 jQuery 选择器允许我内联编辑内容。

当我试图为模板的样式添加一些响应时，我遇到了一些障碍：在我的模板样式表中，我使用预览区域的特定 id 来指定样式应该应用的位置。我将相同的 id 应用于查看帖子的正文标签，以便编辑器中的预览和帖子的完整视图看起来相同。

我在事物的视图方面进行了一些媒体查询，并意识到在预览页面上，类似@media screen and (max-width: 640px)的行为会有所不同，因为预览不会占用屏幕的整个宽度。

有没有办法可以使用除屏幕宽度之外的媒体查询选择器，而是使用元素的宽度..或等效的东西？或者是否有另一种方法可以简单地使用 javascript 来模仿这种行为。