Question

我不能让我的标题表现出我想要的反应。

当我调整窗口大小时，它看起来就像我希望它看起来一样。但是，当我进入开发工具设备模式时，iPhone的视图最终会以文本全部排成一行，即使我将span设置为display：block，并且标题是 way 高于我的愿望。对于其他设备，标题在div之外流血。

What I want is this，这是我相应调整浏览器窗口大小时的样子。它不是我在设备模式下的任何地方。

我用我的所有代码制作了a pen。

我真的已经整晚都在尝试，而且令人沮丧的是我还没有找到解决方案。 一个主要问题除此之外，我还想找到一种方法来做到这一点，而不需要VH单位作为标题的位置，因为正如你将在笔中看到的那样窗口低于900px高，标头在div外面流血。任何帮助将不胜感激！

<div class="container">
      <h1>**** On <span>Tour</span></h1> 
    </div>

@import url(http://fonts.googleapis.com/css?family=Raleway:900,600,500,800,700);
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body {
          font-family: 'Raleway', sans-serif;
          background-color: white;
        }

        .container {
          background: url('http://i.imgur.com/W6DHyPf.jpg') no-repeat center center;
          -webkit-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          overflow-x: hidden;
          overflow-y: auto;
          height: 40vh;
          width: 100%;
        }

        h1 {
          position: absolute;
          top: 22vh;
          color: #ff1744;
          mix-blend-mode: exclusion;
          font-weight: 900;
          font-size: 5em;
          letter-spacing: -3px;
          padding: 0 .2em;
          text-align: justify;
          margin: 0 auto;
          text-transform: uppercase;
        }

        @media screen and (min-width: 375px) {
          h1 {
            top: 24vh;
          }
          span {
            display: block;
          }
        }

        @media screen and (min-width: 562px) {
          h1 {
            font-size: 6em;
            top: 20vh;
          }
        }

        @media screen and (min-width: 681px) {
          h1 {
            font-size: 7em;
            top: 17vh;
          }
          span {
            display: inline;
          }
        }

        @media screen and (min-width: 729px) {
          h1 {
            font-size: 7em;
            top: 28vh;
          }
          @media screen and (min-width: 729px) {
            h1 {
              font-size: 7em;
              top: 28vh;
            }
            @media screen and (min-width: 2560px) {
              h1 {
                font-size: 10em;
                top: 28vh;
              }
            }

Answer 1

从我能够观察到的情况来看，您遇到的问题似乎是Chrome DevTools＆＃39;设备视图不会以与Google Chrome相同的方式显示屏幕尺寸。

如以下屏幕截图所示，从Apple iPhone 6 Plus＆＃34;的角度查看Chrome设备视图时，<span>元素中包含的<h1>元素为受以下媒体查询影响：

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

Computation of Inline Style

为了解决这个问题，我建议在真实的移动设备上测试页面（也许该网站显示正常，因为这可能是Chrome DevTools问题）。否则，JavaScript可用于检测网站正在查看的设备类型，允许网站在所有较小的移动设备上将<span>元素显示为块。

有关如何检测用户代理类型的更多信息，请参阅以下答案：How to detect a mobile device with javascript?

修改：此问题也是通过在页面的<head>部分添加以下标记来解决的：<meta name="viewport" content="width=device-width, initial-scale=1">。

我希望这很有帮助，
PSGS

Answer 2

我强烈建议使用Bootstrap网格系统来帮助进行响应式设计。我看到你写了大量的媒体查询，当我试图创建一个响应式布局时，对我来说总是让人感到困惑。如果您使用Bootstrap网格CSS，它基本上会为您处理大部分响应式设计，并且您始终可以包含媒体查询以获取Bootstrap无法为您解决的任何问题。

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

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

注意：.container实际上是一个预定义的bootstrap类，所以我将你的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类也是预定义的Bootstrap类，它们的工作方式与您的思路完全相同 - 请查看上面链接的Bootstrap站点以获取更多信息。

标题不符合我想要的响应式布局

2 个答案: