1
我正在上一門課程，並被困在我的作業中。我應該使用媒體查詢來使網站響應，大多數情況下它的工作原理是這樣的，但是當我達到一定的價值時，我的文本消失了。它發生在窗口寬度爲680px到690px，我只是沒有想法，爲什麼。它應該覆蓋@media（max-width：700px）語句，不應該這樣嗎？我的CSS與所有其他窗口寬度一樣好.. 任何想法？調整窗口大小時文字會消失
/**
* GENERAL
*/
html {
\t box-sizing: border-box;
}
*, *:before, *:after {
\t box-sizing: inherit;
}
/* clearfix */
.group:before,
.group:after { content: " "; display: table; }
.group:after { clear: both; }
body {
\t color: #2f2f2f;
\t font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif;
\t padding: 1.4em;
\t max-width: 100%;
}
p {
\t margin: 0;
}
img {
\t max-width: 100%;
\t height: auto;
}
.container {
\t max-width: 960px;
\t margin: 0 auto;
}
article {
\t width: 31.25%; /*width: 300px;*/
\t float: left;
\t margin: 0 1.04%; /*margin: 0 10px;*/
}
.text {
\t text-align: center;
}
@media (max-width: 1010px) {
\t body {
\t \t font-size: 0.85em;
\t \t line-height: 1.28em;
\t \t padding: 1em;
\t }
\t h3 {
\t \t font-size: 1.05em;
\t \t margin: 0.7em;
\t }
}
@media (max-width: 940px) {
\t body {
\t \t font-size: 0.75em;
\t \t line-height: 1.13em;
\t \t padding: 0.5em;
\t }
\t h3 {
\t \t margin: 0.25em 0;
\t \t font-size: 1em;
\t }
}
@media (max-width: 780px) {
\t article {
\t \t float: none;
\t \t width: 100%;
\t \t height: 200px;
\t \t overflow: hidden;
\t \t margin: 0 0 2.55% 0;
\t }
\t .image {
\t \t display: inline-block;
\t \t vertical-align: middle;
\t }
\t .text {
\t \t display: inline-block;
\t \t max-width: 55%;
\t \t vertical-align: middle;
\t }
}
@media (max-width: 700px) {
\t article {
\t \t position: relative;
\t \t width: 300px;
\t \t margin: 10px auto;
\t }
\t .image, .text {
\t \t display: block;
\t }
\t .text {
\t \t position: absolute;
\t \t bottom: 0;
\t \t left: 0;
\t \t max-width: none;
\t \t background: rgba(255, 255, 255, 0.5);
\t \t color: #444;
\t \t font-size: 0.75em;
\t \t z-index: 2;
\t }
\t h3 {
\t \t color: #323232;
\t }
\t .image {
\t \t position: absolute;
\t \t top: 0;
\t \t left: 0;
\t \t z-index: 1;
\t }
}<div class="container group">
\t \t <article>
\t \t \t <header class="image">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna">
\t \t \t </header>
\t \t \t <div class="text">
\t \t \t \t <h3>Fionna</h3>
\t \t \t \t <p>An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.</p>
\t \t \t </div>
\t \t </article>
\t \t <article>
\t \t \t <header class="image">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler">
\t \t \t </header>
\t \t \t <div class="text">
\t \t \t \t <h3>Peppermint Butler</h3>
\t \t \t \t <p>Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.</p>
\t \t \t </div>
\t \t </article>
\t \t <article>
\t \t \t <header class="image">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess">
\t \t \t </header>
\t \t \t <div class="text">
\t \t \t \t <h3>Flame Princess</h3>
\t \t \t \t <p>Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily.
\t \t \t \t <p>
\t \t \t </div>
\t \t </article>
\t </div>
，顯然，因爲我已經張貼了這個，文本消失在一個不同的寬度值，但沒有太大的差異..就像700px左右..我根本不明白 –