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/

由于某种原因，小提琴并没有显示我在浏览器中完全相同的东西 - 在浏览器中，页面标题下的导航菜单不会从包含的div中出来，它会显示正确在标题之下。这就是网站将如何看待320像素，我正在使用响应式设计视图工具进行测试。在这个resolutin，页面标题被切断。背景图像也会发生同样的事情。我给包含页面标题的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;
    }
}

Answer 2

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

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

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

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

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

2 个答案: