jquery - 如何在视差背景之上对跨度文本应用媒体查询？

Question

我创建了一个带有视差背景 (stellar.js) 的 Bootstrap 3 网站。

我正在尝试在 span-tags 中在此背景之上创建一个居中文本，它应该根据屏幕大小响应地更改其大小。由于“.background-photo span”使用的是 1280 像素的固定宽度，我打算在宽度上应用媒体查询以在较小的分辨率下相应地更改尺寸。

问题是我的媒体查询在 767 和 1223 像素的屏幕宽度之间无法正常工作，并且文本超出了跨度。文本框应保持居中并在不破坏相应行宽的情况下响应地更改其大小。

请查看我创建的 JS BIN 并更改窗口大小以查看问题:

JS BIN Example

非常感谢您对此的帮助。

Answer 1

看起来你的 .container div 和它的父级没有在某些断点处一起调整它们的宽度。有一次，媒体查询将父 span 的宽度调整为 400px，而 .container div 并没有减少到 400px。

我建议重新配置您的引导媒体查询，以确保这两个元素在相同的断点处改变宽度。如果可以，请为父跨度提供一个 ID，以便轻松访问它。