问题标签 [responsive]

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 回答
170 浏览

javascript - bootstrap 崩溃在 xs 上关闭,但在 lg 上打开。如果单击,则在窗口 onresize 保持打开

在 xs 和 sm 上,一个 div 被折叠,一个按钮切换这个 div 的折叠。在 lg 屏幕上,div 始终处于打开状态,并且按钮被隐藏。

问题是,如果用户在 xs 或 sm 上并单击打开 div 的按钮,一旦他们移动浏览器窗口,它就会关闭。(我有一个 window.resize 函数可以执行此操作,因为它需要用于不同的用户案例,即如果用户在 lg 上并将浏览器窗口移动得更小以变为 sm。div 将正确关闭)。

所以我需要稍微调整一下,只在 sx 或 sm 上说,如果单击按钮打开,则忽略 window.resize 函数。

如果单击#Pnl1Btn,则可能将var'wasClicked'设置为true,然后在window.resize事件中进行比较以停止removeClass?我想不通...

HTML:

JS:

CodePen 链接

0 投票
1 回答
2903 浏览

html - @media (min-width: ) 和 (max-width: ) 查询无法正常工作

我正在使用@media查询将我的 html 页面转换为响应式页面,但我坚持将我的页面转换为响应式页面。

我在用

在我的 CSS 代码中

但是当我的浏览器宽度为 942 像素时,背景颜色会发生变化。以及我正在编写的任何 CSS 代码@media(min-width:480px) and (max-width:959px)。CSS 样式仅适用于 (max-width:)。

由于这些错误/问题,我无法将我的 html 页面转换为响应式页面。

0 投票
1 回答
10701 浏览

html - 如何在引导程序中创建固定表头?

我需要为我的引导表固定表头,任何人都有完美的解决方案请指导我,

注意:它应该是一个响应表。

0 投票
1 回答
1399 浏览

css - 将可点击图标放在引导导航栏切换旁边

我想在使用引导程序的网站上的导航栏切换旁边放置一个可点击的图标。

我试过玩 pull 和 align 类,但没有运气。

问候

0 投票
2 回答
164 浏览

css - 不希望 iframe 在 759px 之后占用 100% 的宽度

我对 youtube iframe 视频有疑问。我希望 iframe 占据页面的 100% 宽度并在移动设备上保持纵横比。我不希望视频大于 560 宽度或 315 高度。然后,我希望这 2 个视频在平板电脑和桌面上显示为内联块。我希望 iframe 在平板电脑和台式机上并排。我似乎无法弄清楚这一点。我对此进行了详尽的搜索,但找不到有效的答案。这是我的代码。

HTML

CSS

任何帮助,将不胜感激。我正在为一堂课做这个。教授不知道如何解决这个问题。谢谢

0 投票
0 回答
882 浏览

zurb-foundation - 粘性的基础响应切换下拉导航

我是 Foundation 的新手,我试图将 Foundation 的几个组件混合到一个导航栏中,只需使用他们在 html 中提供和演示的类和数据属性。

我遵循了响应式切换下拉菜单的说明:http: //foundation.zurb.com/sites/docs/responsive-navigation.html

我想让它变得粘稠。请参阅:http: //foundation.zurb.com/sites/docs/sticky.html#sticky-navigation,“使用标题栏、下拉菜单和粘性创建粘性导航菜单!”

他们省略了切换部分,所以我不知道仅使用它们为 html 提供的类和数据属性是否可行。

我可以让他们两个单独工作,但不能一起工作。它似乎有问题,但它可能是我。我很想听听任何可能成功做到这一点的人!

这是我到目前为止所拥有的。较宽的窗口具有粘性和响应性。下拉列表最初位于 jumbotron 之后,直到您向上滚动一点。

窄窗口的响应式切换有效,但粘性无效。最初,下拉菜单位于 jumbotron 下方,直到您稍微扩大窗口。向下钻取工作正常。

这是代码:

你可以在这里找到演示:http: //lucillekenney-demos.com/fruit/home.html

0 投票
1 回答
287 浏览

html - div 高度与具有最小高度的背景图像相同

我正在尝试将响应式表单放入带有背景图像的 div 中,该背景图像将整个宽度从屏幕上移开。在搜索了一段时间之后,使背景图像 div 成为图像的完整大小的最佳选择似乎是使用图像大小的 padding-bottom。现在的问题是,当我在较小的屏幕上观看它时,背景图像 div 太小以适应表单的内容。我尝试使用 min-width:100% 但这没有帮助。

html:

CSS:

0 投票
1 回答
55 浏览

html - 网站入口响应卡住的 div

我似乎无法在网上找到我正在寻找的确切答案,但问题是我什至不确定要寻找什么。

当您进入主页时,我希望将 div 粘在底部(对于任何设备)以及滚动时。但我不希望它固定,以便它随屏幕滚动。

我确信这是我忽略的一些响应技巧,但我希望得到一些反馈。提前谢谢你!

编辑:我不希望 div 在滚动时跟随你。但我确实希望它在您第一次查看该网站时出现在屏幕的最底部(无论您使用何种平台查看该网站。)

例子是这个网站。向下箭头出现在所有设备的同一位置,但不随用户滚动:https ://www.nabitablet.com/

0 投票
1 回答
220 浏览

html - 我正在尝试设置响应式标题背景,但我遇到了问题

所以我试图设置这个图像:jordandevelop.com/test/img/header.jpg

作为标题背景。我遇到的问题是它不会响应不同的屏幕分辨率。下面是我目前设计的 CSS。

任何建议都会很棒。这是网站的链接:https ://jordandevelop.com/test/

编辑:这是我当前的标题 CSS。

0 投票
1 回答
2519 浏览

css - HTML5 SVG 100% 宽度和 100% 视口高度?

我正在尝试使用 SVG 元素制作信息图,但我一生都无法弄清楚如何让我的 SVG 适合视口。无论我做什么,底部都会有轻微的垂直滚动和小白线。

代码笔: http ://codepen.io/nicholasdrzewiecki/pen/zqEprw

HTML

CSS