如何使我的网页标题响应CSS

Question

我正在努力使页面的标题具有响应性（我首先为移动设备编写代码，然后转到更宽的视口），我正在使用以下HTML和CSS代码：

HTML:

     <header>

        <div class="page_title">
            <h1 >TOYWAWA</h1>
        </div>

        <nav>
            <ul>
                <li><a href="nou.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
       </nav>
    </header>

和CSS:

    header {
                   width: 100%;
                   border-bottom: 10px solid black;
                   border-top: 10px solid black;
                   height: 300px;
                   background-image: url(back.2.jpg)
           }

        .page_title {
                 max-width: 100%;
                 margin-top: 75px;
                 margin-bottom: 50px;
                 font-size: 70px;
                 font-family: BrandonGrotesque-Black, "futura-pt-1","futura-pt-2", Verdana, sans-serif;
                 }

        nav ul li {
             display: inline-block;
             padding: 15px;
             list-style-type: none;
             font-family: BrandonGrotesque-Black, "futura-pt-1","futura-pt-2", Verdana, sans-serif;
                }

这是一个完整的链接：https://jsfiddle.net/Cilvako/5Lcy4cxx/embedded/result/

出于某种原因，fiddle不会显示与我在浏览器中看到的完全相同的东西——在浏览器中，页面标题下的导航菜单不会从包含的div中显示出来，而是显示在标题下。这就是网站320像素的外观，我正在使用响应式设计视图工具进行测试。在这个解析过程中，页面标题被截断。背景图像也会发生同样的情况。我给了包含页面标题的div 100%的最大宽度，但仍然没有帮助。有什么想法吗？

Answer 1

您可以尝试使用媒体查询

header {
    width: 100%;
    border-bottom: 10px solid #000;
    border-top: 10px solid #000;
    height: 300px;
    background-image: url("back.2.jpg");
}
.page_title {
    max-width: 100%;
    margin-top: 75px;
    margin-bottom: 50px;
    font-size: 70px;
    font-family: BrandonGrotesque-black,"futura-pt-1","futura-pt-2",Verdana,sans-serif;
}
@media (max-width: 600px) { 
/* Styles for screen with max width of 600px */
    header {
        height: auto;
    }
    .page_title {
        margin: 0;
        font-size: 25px;
        text-align: center;
    }
}
@media (max-width: 320px) { 
/* Styles for screen with max width of 320px */
    header {
        height: auto;
    }
    .page_title {
        margin: 0;
        font-size: 25px;
    }
}

Answer 2

您应该删除.page_title的div，并将<h1>标记的类更改为.page_title.

<h1 class="page_title"></h1>

css将应用于标题，而不是容器。

JSFIDDLE：http://jsfiddle.net/5Lcy4cxx/3/