Css 标题不符合我在响应式布局中的要求

我不能让我的头球表现出我想要的反应

当我调整窗口大小时，它看起来正是我想要的样子。然而，当我进入dev-tools设备模式时，比如iPhone的视图最终显示的文本都是一行，即使我将span设置为display:block，并且标题比我期望的要高。对于其他设备，标题在div外部出血

，这就是相应调整浏览器窗口大小时的外观。它与我在设备模式下得到的结果相差甚远

我用我所有的代码做的

我真的试了一整晚，但令人沮丧的是我没有找到解决办法除此之外，我还有一个主要问题我很想找到一种不用VH装置来做这件事的方法，因为正如你在笔中看到的，当窗口高度低于900px时，收割台会在div之外流血。任何帮助都将不胜感激

****巡回演出

据我观察，您遇到的问题似乎是由于Chrome DevTools的设备视图显示屏幕大小的方式与Google Chrome不同

如以下屏幕截图所示，当从“Apple iPhone 6 Plus”的角度查看Chrome设备视图时，

元素中包含的

元素受到以下媒体查询的影响：

@media screen and (min-width: 681px)

为了解决这个问题，我建议在一个真正的移动设备上测试这个页面（也许这个站点会显示得很好，因为这可能是ChromeDevTools的问题）。否则，JavaScript可用于检测网站正在使用的设备类型，允许网站在所有较小的移动设备上以块的形式显示

元素

有关如何检测用户代理类型的更多信息，请参见以下答案：

编辑：通过在页面的

部分添加以下标记，也解决了此问题：

我希望这会有所帮助，

---

psgs

我强烈建议使用网格系统来帮助响应性设计。我看到您编写了大量的媒体查询，当我试图创建响应性布局时，这些查询对我来说总是非常混乱。如果您使用Bootstrap网格CSS，它基本上会为您处理大部分响应性设计，并且您可以始终包括媒体查询，以获取Bootstrap无法为您解决的任何问题

其基本思想是，通过在HTML中使用预定义的引导类，可以创建响应性布局。Bootstrap将页面宽度划分为12个相等的列，根据所用设备的不同，具有不同的宽度。对于需要响应的元素，您可以指定大型（桌面）、中型（平板电脑）和小型（智能手机）设备应占用的列数

下面是一个使用HTML的示例：

• 注意：.container实际上是一个预定义的引导类，所以我将您的类div更改为.myContainer

  <div class="container">  
      <div class="row">
          <div class="myContainer col-lg-4 col-md-4 col-sm-12">
          <h1>**** On <span>Tour</span></h1> 
          </div>
      </div>
  </div>
  

  
  ****巡回演出
  

---

上面的HTML表示，对于大型或中型设备，div.myContainer将占据屏幕宽度的三分之一（十二列中的四列），但对于小型设备，它将覆盖整个屏幕宽度。这只是一个使用示例，您必须稍微玩转这些类，看看什么最适合您。.row和.container类也是预定义的引导类，它们的工作方式与您的想法完全相同-查看上面链接的引导站点以了解更多信息。

这些媒体查询应该是嵌套的，还是您缩进代码的方式？你错过了几个}s，所以我不能单从布局上看出来。我想浏览器会被那些媒体查询弄糊涂。我的建议是，首先让它在没有任何问题的情况下工作，然后把它们一个接一个地加回去，看看哪一个出了问题。另外，

vh

有什么问题？他们和其他单位一样。如果希望h1完全位于容器内，请确保h1的顶部加上其高度不大于容器的高度；无论你用什么单位来达到高度！（不过，您可能也希望在

vh

中为h1指定一个字体大小。）@MrLister抱歉，我就是这样缩进的。在我的本地机器上不是这样的。我对VH的唯一问题是，正如我所说的，当窗户的高度缩小时，h1从容器中溢出。感谢您提供有关使用vh调整收割台尺寸的建议！非常感谢你！我希望这是DevTools的问题。我将尝试JavaScript解决方案！目前，使用宽度=设备宽度的元标记，初始比例=1是可行的。我不喜欢响应性设计，所以我不确定这是一个真正的修复还是只是一个看似解决问题的黑客行为。使用

width=devicewidth，initial scale=1

meta标签肯定有助于确保网站在移动设备上响应；这很可能是解决这个问题的适当办法。它也适合在生产环境中使用。谢谢！我不敢相信有这么简单的解决办法。它确实解决了缩放问题。我想这就是我们学习的方式，对吗？我一定不会忘记再补充一次。非常感谢！我现在正在通读所有的文档。媒体查询确实让跟踪事情变得很困难，所以有一种方法来获得大量预定义的响应性正是我想要的。你做到了！如果您的页面上有任何需要响应的图像，那么class.img responsive也非常有用。Bootstrap让我避免了多次撕头发！