我在试图弄清楚为什么我的移动格式的标题没有显示出来时遇到问题。任何人都可以看到我看不到的东西吗？我已经尝试了两个星期，但我一定错过了一些东西。看来我的较大版本可以正常工作，但是对于此问题我能提供的任何帮助将不胜感激。谢谢。
/* very small mobile styles */
@media only screen and (max-width: 320px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 0;
margin: 0;
}
main img {
max-width: 300px;
height: auto;
padding: 0;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
font-weight: bold;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 0.75em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* mobile portrait styles */
@media only screen and (max-width: 768px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
text-align: center;
position:relative;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 5px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 1em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* laptop styles */
@media only screen and (max-width: 1024px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* large laptop styles */
@media only screen and (max-width: 1362px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
width: 236px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* desktop styles */
@media only screen and (max-width: 1440px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 500px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* HD styles */
@media only screen and (min-width: 1441px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 300%;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Volume Salon Westlake</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container-header">
<div class="top-left">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo">
<div class="top-right">
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</div>
<div class="container-header-mobile">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo"><br>
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</header>
<main>
<div>
<h1>Volume Salon, located in Westlake, Ohio is... To view offered services and schedule an appointment with one of our independent sylists, visit the links below:</h1>
</div>
<div>
<figure class="cap-bot">
<a href="Nikki.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nikki.png" alt="Nikki"></a>
<figcaption>Nikki</figcaption>
</figure>
<figure class="cap-bot">
<a href="Kevin.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kevin.png" alt="Kevin"></a>
<figcaption>Kevin</figcaption>
</figure>
<figure class="cap-bot">
<a href="Kelley.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kelley2.png" alt="Kelley"></a>
<figcaption>Kelley</figcaption>
</figure>
<figure class="cap-bot">
<a href="Anne-Marie.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/anne-marie.jpg" alt="Anne-Marie"></a>
<figcaption>Anne-Marie</figcaption>
</figure>
</div>
<div class="bot-social">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<br><br><br>
</main>
<footer>
<p>© 2018 Volume Salon</p>
<p>Made with ♥ by <a href="https://codepen.io/valsburger/" target="_blank">Valarie Pisarcik</a></p>
</footer>
</body>
</html>
答案 0 :(得分：0)
因为您设置了320px，所以标题的宽度不会小于dispaly: none。
.container-header {
display: none;
}
请更改为：
.container-header {
display: block;
}
答案 1 :(得分：0)
看看这是否对您有帮助：
https://codepen.io/panchroma/pen/NBaNXv
请记住CSS代码是级联的。如果您的样式表具有
.element{
display:block;
}
.....
.element{
display:none;
}
然后，.element的显示属性将为none。
在您的CSS代码中，您有
@media only screen and (max-width: 320px) {
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
}
...
@media only screen and (max-width: 1024px) {
.container-header-mobile {
display: none;
}
}
有两种方法可以阻止一个媒体查询覆盖另一个媒体查询。
在笔中，我通过向每个媒体查询添加（最小宽度）来修改您的媒体查询，例如
@media only screen and (max-width: 320px) {
...
}
@media only screen and (min-width: 321px) and (max-width: 768px) {
...
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
...
}
另一种选择是反转媒体查询的顺序，首先使用桌面视口，最后使用移动视口：
@media only screen and (min-width: 1441px) {
...
}
@media only screen and (max-width: 1440px) {
...
}
@media only screen and (max-width: 1362px) {
...
}
希望这会有所帮助！