问题标签 [responsiveness]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
11406 浏览

html - Bootstrap 3导航栏没有响应

我一直在各种设备上测试我的引导站点,以确保它具有响应性。除了导航栏之外,我已经为不同的显示尺寸正确调整了所有内容。在我的浏览器上,当我水平调整窗口大小时,它似乎响应,按预期折叠菜单,但在移动设备上,我仍然看到导航栏,就好像它在台式机或笔记本电脑的全屏窗口中显示一样。这是我的导航栏的代码:

我尝试将 nav 元素更改为 div 以查看是否有帮助但没有成功。我还删除了封闭的容器类 div 看看这是否有帮助,也没有运气。

0 投票
2 回答
535 浏览

html - 非响应页面中的响应弹出窗口

有一个网站。它没有响应。例如,它的容器/主体宽度为 960 像素。有一个弹出窗口,它以某种 Fancybox(在现实生活中 - remodal)打开。窗口和此窗口中的内容是响应式的。但是当它在移动设备上打开时,弹出窗口不使用当前智能手​​机显示宽度的 CSS 规则,因为该站点是静态的并且具有 960 像素宽度。如何重新定义元视口标签(或其他任何标签),以使浏览器认为该站点是响应式的并打开响应式弹出窗口?

0 投票
1 回答
60 浏览

html - 引导和图像响应

我有一个完全响应的网站,但是有一个不是 ans 的部分位于口号 URBAN FREE SPIRIT 下方(我在谈论图像)我试图拥有类容器,类 img-responsive 但似乎没有工作 ..

这是我的网站,我认为通过检查器查看会比复制粘贴更容易

http://v1954132.caqoajqezbu9.demo42.volusion.com/

0 投票
1 回答
88 浏览

css - Outlook 上的灵活图像

如何在 Outlook 上使图像灵活?

我试过@media, width:100%, max-width:150px和其他类似的东西,但它不起作用。

0 投票
2 回答
5609 浏览

javascript - Bootstrap 响应式菜单和下拉菜单未扩展

我按照我观看的教程中的所有说明进行操作,但响应式菜单没有展开?甚至下拉菜单也不起作用。当我单击按钮时,什么也没发生,它只是改变了它的颜色。我可能做错了什么?

HTML

JS

0 投票
1 回答
73 浏览

html - DIV 高度基于容器内许多元素的宽度

我在一个容器盒(和 10 个容器)中有一组 70 个方形 div 元素。我想在每个第 7 个 div 元素处设置一个断点,所以我最终得到 10 行,每行 7 个 div。正方形的边距应该很薄。我已将元素宽度设置为 13.68571428571429%,将其余部分保留为边距。

我怎样才能实现高度调整到宽度,所以我总是得到 7 个正方形,宽度和高度基于百分比相等?

尝试过 Javascript,但它渲染的时间太长,有 700 个方块。Flexbox 似乎只在较新的浏览器上兼容(我们仍然有相当数量的用户在较旧的浏览器上)。

这是我的html:

0 投票
3 回答
1886 浏览

html - 浏览器的地址栏尺寸会影响 CSS 媒体查询吗?

当我为我的网站编写媒体查询时,我想到了:浏览器的地址栏会影响 CSS 媒体查询吗?

当我编码时:

我在考虑浏览器地址栏的高度吗?地址栏是否将像素减去屏幕视口?

我必须考虑这个媒体查询吗?

0 投票
0 回答
662 浏览

d3.js - 使 D3 强制有向图响应并遵守边界框

我有一个通过 D3 生成的力导向图,它不能很好地与我找到的响应代码或边界框代码配合使用。由于我所有圈子的半径各不相同,我认为它会丢掉一些东西......感谢任何帮助!

我必须在线条上使用自定义长度,因为如果我不手动将它们分开,因为半径不一样,节点会相互碰撞。

(请不要用代码将我链接到 d3 页面,我已经尝试过了,但如果你认为它可以解决这个问题,我可能把它放在错误的位置。我也尝试发布图像,但是我没有足够的声誉。)

0 投票
1 回答
300 浏览

twitter-bootstrap - 容器宽度的响应性

我正在使用引导程序进行响应式表单布局。我能够通过引导网格系统(col-xs-..、col-md-..等)实现响应式布局这是工作示例:http: //jsfiddle.net/xf93jnLw/2/

问题是由于媒体查询,表单布局正在通过屏幕视口宽度进行调整,即左导航宽度 + 表单容器宽度。我希望仅根据表单容器宽度调整响应能力。因此,如果我想在模式窗口中使用这个表单容器,表单字段和标签应该通过表单容器的宽度而不是整个屏幕视口进行调整。是否有任何纯 CSS 解决方案?

感谢您的回复...

HTML 代码:Left nav

用于测试的长标签:

CSS:

0 投票
3 回答
848 浏览

html - 如何使表格 td 取其内容的宽度

演示:http: //jsfiddle.net/zvmcyp4w/

我正在模拟包含同一个表格的“宽”和“窄”的响应式布局。

在“窄”中,您可以左右滚动。

如果一个单元格的内容是由多个单词组成的,比如第一个单元格,它会自动分成几行。

我正在寻找的是避免断线并让单元格水平扩展以适应其内容,因为内容是动态的,因此不允许使用固定宽度或最小宽度。

理想情况下,一个干净的纯 CSS 解决方案会很棒,我已经知道如何用 JavaScript 解决它。