0
我早些時候問過關於同一個項目的問題，但這是我遇到的另一個問題。使用CSS Media Queries來更改頁面佈局
我應該使用三種不同的媒體查詢來改變頁面佈局基於用來查看它的屏幕大小（我正在通過調整我的瀏覽器窗口來測試）。三個是查詢工作如下：
一切工作正常，除了得到列儘快大小變爲400出現並排我的意思是，當我在拖動窗口，背景變化正確，以及所有內容，但是列並不是並排出現，直到屏幕距離最窄點一半左右並最大化（我真的希望這是有意義的）。
這裏是我的CSS：
@media (max-width: 399px) {
body {
background-color: purple;
border: 10px double black;
padding: 1%;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-image: url("sfalogo2.jpg");
background-repeat: no-repeat;
background-position: center;
color: black;
width: auto;
border: 10px double white;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
#good-id {
background-image: url("scaled_sfalogo2.jpg");
background-repeat: no-repeat;
background-position: center;
color: black;
width: auto;
border: 10px double white;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
clear: both;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
}
@media (max-width: 499px) and (min-width: 400px) {
body {
background-color: white;
border: 10px double black;
padding: 1%;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-image: url("sfalogo3.jpg");
width: auto;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
padding: 1.5%;
width: auto;
}
#good-id {
color: black;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
padding: 1.5%;
width: auto;
background-image: url("sfalogo3.jpg");
background-repeat: no-repeat;
background-position: center;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
clear: both;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
}
@media (min-width: 500px) {
body {
background-image: url("sfa_logo1.jpg");
color: black;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-color: white;
color: purple;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
width: 400px;
padding: 1.5%;
}
#good-id {
background-color: white;
color: purple;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
width: 400px;
padding: 0.5%;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
float: right;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
float: right;
}
}
這裏是我的html，雖然這個項目的介紹，並沒有真正讓我改變了HTML的一切，我只能用CSS工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS 351 - Project 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="css-zen-garden">
<section class="intro-start" id="start-intro-id">
<header role="bannerRocks">
<h1>CS 351 Rocks</h1>
<h2>351 is a really great thing!</h2>
</header>
<div class="summaryDivision" id="zen-summary" role="article">
<p>There are many ways that it is great.<a href="/examples/style.css" title="This page's sample CSS, the file you may modify."></a></p>
</div>
<div class="start" id="start-id" role="article">
<h3>The Road to Enlightenment</h3>
<p>To be, or not to be: that is the question". - (Act III, Scene I).</p>
<p>"Neither a borrower nor a lender be; For loan oft loses both itself and friend, and borrowing dulls the edge of husbandry". - (Act I, Scene III).</p>
<p>"This above all: to thine own self be true". - (Act I, Scene III).</p>
<p>"Though this be madness, yet there is method in 't.". - (Act II, Scene II). </p>
<p>"That it should come to this!". - (Act I, Scene II). </p>
<p>"There is nothing either good or bad, but thinking makes it so". - (Act II, Scene II). </p>
<p>"What a piece of work is man! how noble in reason! how infinite in faculty! in form and moving how express and admirable! in action how like an angel! in apprehension how like a god! the beauty of the world, the paragon of animals! ". - (Act II, Scene II).</p>
<p>"The lady doth protest too much, methinks". - (Act III, Scene II). </p>
<p>"In my mind's eye". - (Act I, Scene II).</p>
<p>"A little more than kin, and less than kind". - (Act I, Scene II).</p>
<p>"The play 's the thing wherein I'll catch the conscience of the king". - (Act II, Scene II). </p>
<p>"And it must follow, as the night the day, thou canst not then be false to any man". - (Act I, Scene III)."This is the very ecstasy of love". - (Act II, Scene I).</p>
<p>"Brevity is the soul of wit". - (Act II, Scene II).</p>
<p>"Doubt that the sun doth move, doubt truth to be a liar, but never doubt I love". - (Act II, Scene II).</p>
<p>"Rich gifts wax poor when givers prove unkind". - (Act III, Scene I).</p>
<p>"Do you think I am easier to be played on than a pipe?" - (Act III, Scene II).</p>
<p>"I will speak daggers to her, but use none". - (Act III, Scene II).</p>
<p>"When sorrows come, they come not single spies, but in battalions". - (Act IV, Scene V).</p>
</div>
</section>
<div class="bad inbetween" id="good-supporting" role="main">
<div class="good" id="good-id" role="article">
<h3>Make it good.</h3>
<p>"Now is the winter of our discontent". - (Act I, Scene I). </p>
<p>"A horse! a horse! my kingdom for a horse!". - (Act V, Scene IV). </p>
<p>"Conscience is but a word that cowards use, devised at first to keep the strong in awe". - (Act V, Scene III).</p>
<p>"So wise so young, they say, do never live long". - (Act III, Scene I). </p>
<p>"Off with his head!" - (Act III, Scene IV). </p>
<p>"An honest tale speeds best, being plainly told". - (Act IV, Scene IV). </p>
<p>"The king's name is a tower of strength". - (Act V, Scene III). </p>
<p>"The world is grown so bad, that wrens make prey where eagles dare not perch". - (Act I, Scene III).</p>
</div>
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="occasion">On the occasion...:</h3>
<nav role="navigation">
<ul>
<li>
<a href="http://cnn.com" class="design-name">Caesar</a></li>
<li><a href="http://sfasu.edu">SFA</a></li>
<li><a href="http://cosm.sfasu.edu">COSM</a>
</li>
</ul>
</nav>
</div>
<div class="zen-resources" id="zen-resources">
<h3 class="animals">Resources:</h3>
<ul>
<li class="view-css">
Cats</li>
<li class="view-css">Dogs</li>
<li class="view-css">Elephants</li>
<li class="view-css">Rhinos<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page."></a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<!--
These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
These days we have full ::before and ::after support, favour using those instead.
These only remain for historical design compatibility. They might go away one day.
-->
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>
</body>
</html>
就像我說過的，一切工作正常，只是一個問題。任何建議，非常感謝。
使用CSS3'Flex'功能，您可以輕鬆更改頁面佈局。 – 2014-09-04 05:00:05