html - 如何使我的页面标题响应 CSS？

Question

我正在尝试使我的页面标题具有响应性(我首先为移动设备编写代码，然后再为更宽的视口(viewport)编写代码)并且我正在使用以下 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;

                }

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

出于某种原因，fiddle 显示的内容与我在浏览器中显示的内容完全不同 - 在浏览器中，页面标题下的导航菜单不会从包含的 div 中退出，而是显示在标题的正下方。这就是网站在 320 像素下的显示方式，我正在使用响应式设计 View 工具进行测试。在此分辨率下，页面标题被截断。背景图像也会发生同样的事情。我给包含页面标题的 div 设置了 100% 的最大宽度，但仍然没有帮助。有任何想法吗？

Answer 1

您可以尝试使用 media queries

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;
    }
}