html - 如何使用媒体查询将文本下拉到第二行？

Question

当我的网站达到特定大小时，我希望 Logo 分成两半，以便摄影和设计位于第二行。我将如何做到这一点？

@media only screen and (max-width: 424px) {
    
}

<nav>
        <h1 class="logo">Brian Funderburke Photography &amp; Design</h1>  
</nav>

Answer 1

最简单的方法是添加一个跨度，将您想要的内容环绕在自己的行上，然后定位它并为其分配 display: block;

我强烈建议您通过选择适当的类名等方式使它更加健壮。

HTML:

<nav>
  <h1 class="logo">Brian Funderburke <span>Photography &amp; Design</span></h1>
</nav>

CSS:

@media only screen and (max-width: 424px) {
  .logo span {
    display: block;
  }
}

https://jsfiddle.net/6vcbdqqk/