问题标签 [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 回答
3140 浏览

html - 如何将屏幕分成2个div并与手机兼容?

我正在使用 Joomla 3 并编辑应用程序并尝试使其与手机兼容。我正在使用带有 2 个 div 的 div 容器,它将充当列,例如:

这对于任何手机来说都是可怕的,我正在尝试使用 iPhone。似乎第二个 div 内生成的内容超出了可用的屏幕大小或 div 宽度,然后溢出。

有什么方法可以在手机上分屏并在手机上的“左div”下方显示“右div”?

提前致谢

0 投票
2 回答
25049 浏览

javascript - jQuery - 如果屏幕小于指定宽度(响应式)

如果页面宽度小于 ,如何弹出警报1200px并做出响应?

谢谢!

0 投票
2 回答
2357 浏览

javascript - 响应式表格,可以继承嵌套表格单元格的宽度

我有一个响应式表格,每行有不同的内容,每行有一个六角手风琴机制。

手风琴本质上在当前行下方添加了另一个表格行,该行有一个 td 和一个 colspan,用于表示表格中的单元格数量。

在这个手风琴内,我有另一个表格,我需要表格单元格与父表格对齐。我很欣赏这可能单独使用 HTML/CSS 是不可能的,并且可能需要使用 JS 来完成?

还是有其他方法?

我不能在这里发布我的所有代码,但这是我的意思的截图

在此处输入图像描述

0 投票
1 回答
697 浏览

twitter-bootstrap - 在“可见平板电脑”和“可见手机”类中不出现引导灯箱

我正在使用这个原始的引导灯箱:http: //jbutz.github.io/bootstrap-lightbox/

我将其剥离并将图像链接到 div 类"visible-tablet""visible-phone". 在此类中时,不会出现弹出图像​​。例如这里:

http://www.getaveo.com/_bootstrap4/lightbox4.html

1) 请在桌面视图中查看该页面,高于 900 像素。现在单击右侧红色列的图像缩略图。弹出大图像,灯箱工作,很棒。

2) 现在请让您的浏览器更小,如 ipad 视图或 700 像素宽。由于“可见平板电脑”而弹出红色列。现在单击图像缩略图。大图像弹出不出现,不起作用。

3) 与 500 像素或更少的手机视图相同。“可见电话”单击图像缩略图。大图像弹出不出现,不起作用。

如何让图像缩略图弹出,灯箱在"visible-tablet"和中工作"visible-phone"

0 投票
14 回答
394411 浏览

html - 使网站背景图像适合屏幕大小

我刚开始在一个网站上,我已经遇到了一个小问题,我找不到具体的解决方案。

我想让我的网站背景在宽度上适合任何屏幕尺寸,高度无关紧要。

这是我的图片的链接:

编辑

我不知道出了什么问题,但由于某种原因,身体甚至不想获得背景图像。它只显示纯白色背景。

0 投票
1 回答
11733 浏览

twitter-bootstrap - Bootstrap carousel adjust height

I'm new in Bootstrap and I have a question about carousel. I need to set a height of 700px on big screens (pcs) and a height of 500px for cell phones. How can I do it? I put this:

I wait for a response.

Thanks!

0 投票
3 回答
8782 浏览

javascript - 如何使文本响应 div 大小?

我正在建立一个电子商务网站。所有产品都显示在单独的 div 中。我有一个问题:在每个产品的Div中,我想显示产品描述的一部分。当产品描述比 div 长时,它只是在 div 的边缘显示描述。我试图将问题放在图片中: 在此处输入图像描述

现在,如图所示,我想解决三个问题:

  • 我想限制文本以适应 div。
  • 我想确保这不是在单词中间的某个地方完成的
  • 我想在描述预览的末尾添加一个“阅读更多”链接。

现在我在其他电子商务网站上看到了很多,但是在找了几个小时后,我还没有找到关于如何做到这一点的明确描述。

这是生成所有产品卡的代码:

有谁知道如何解决这些问题?任何帮助将非常感激。提前致谢!

更新

答案让我想到了“Line Clamping”,它似乎是执行我需要的任务的 css 或 javascript 代码。实现由 musicly_ut 提供的 javascript 代码和来自 Unamata Sanatarai 的 css 让我想到了这一点: 在此处输入图像描述

我可以说已经取得了进展,因为文本不仅超出了我的 div 的边界。我只剩下两个问题:

  • 由于某种原因,文本夹在我的产品卡的页脚下方
  • 它有时会打断一个词。(它是荷兰语。应该是“beschikt”。)

欢迎任何建议

PS:第二张截图是用 css 实现的,因为 javascript 实现只适用于一种产品(可能是因为产品卡是由 php 'for' 循环生成的 div)

0 投票
4 回答
86265 浏览

javascript - 如何响应 React 中自动调整大小的 DOM 元素的宽度?

我有一个使用 React 组件的复杂网页,并且正在尝试将页面从静态布局转换为响应速度更快、可调整大小的布局。但是,我一直遇到 React 的限制,我想知道是否有处理这些问题的标准模式。在我的具体情况下,我有一个组件呈现为带有 display:table-cell 和 width:auto 的 div。

不幸的是,我无法查询组件的宽度,因为您无法计算元素的大小,除非它实际放置在 DOM 中(它具有推断实际渲染宽度的完整上下文)。除了将它用于相对鼠标定位之类的事情之外,我还需要它来正确设置组件内 SVG 元素的宽度属性。

此外,当窗口调整大小时,我如何在设置过程中将大小变化从一个组件传递到另一个组件?我们在 shouldComponentUpdate 中进行所有第 3 方 SVG 渲染,但您不能在该方法中设置您自己或其他子组件的状态或属性。

有没有使用 React 处理这个问题的标准方法?

0 投票
0 回答
35 浏览

html - 网站在智能手机尺寸屏幕上显示不正确

第一次使用基础,因为我认为这是为所有分辨率制作响应式网站的简单方法。

完全没有反应。我不会说我对网页设计很了解,但我了解事情是如何运作的。

该网站可以在 ipad 上运行,看起来很棒,但是在智能手机上它变成了碎片,背景图像没有填满屏幕,导航菜单被分成两行。

有什么建议吗?

0 投票
1 回答
151 浏览

html - 如果表格获得移动大小,则移动行

我无法让表格响应。

我有什么:

当分辨率低于 643 像素时,我需要知道如何获得该断线。