所以我正在为学校做一个项目，而我似乎无法让这个页面的移动部分正常工作。当我缩小浏览器窗口时，导航按钮由于某种原因变成小方块。我已经落后了一点，我只是坚持这一点，开始让我发疯。任何帮助都会很棒！
-Thefinder
Here's what it's supposed to look like
CSS：
@media only screen and (max-width: 1024px) {
body { margin: 0;
padding: 0;
background-color: #FFFFCC;
background-image: none;
}
#wrapper { width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
border-style: none;
}
header { background-image: url(primemobile.gif);
background-repeat: no-repeat;
text-shadow: 2px 2px 2px #000033;
height: 100%;
}
h1 { margin: 0;
text-indent: 0;
font-size: 3.7em;
padding-left: 2em;
white-space: normal;
}
nav { float: none;
width: auto;
margin-top: 0.5em;
}
nav a { padding: 0.2em;
margin-left: 0.3em;
float: left;
width: 20%;
}
main { padding: 2.5em 1em 2.5em 1em;
margin: 0;
font-size: 90%;
clear: both;
}
}
@media only all and (max-width: 768px) {
h1 { font-size: 2.4em;
padding-top: 0.25em;
padding-left: 1.5em;
}
nav { width: 98%;
}
nav a { padding: 0.5em;
width: 40%;
float: left;
min-width: 5em;
margin-left: 0.5em;
}
main { padding: 0.6em;
}
.floatleft { float: none;
padding-right: 0;
padding-bottom: 0;
}
h3 { padding-top: 0;
margin: 0;
}
dd { line-height: 100%;
}
footer { padding: 0.5em;
margin: 0;
}
#mobile { display: inline;
}
#desktop { display: none;
}
}
body { background-color: #000033;
color: #003300;
font-family: Arial, Helvetica, sans-serif;
background-image: url(primediagonal.png);
}
header { color: #48751A;
background-image: url(primelogo.gif);
background-repeat: no-repeat;
height: 100px;
}
h1 { text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h2 { color: #003366;
}
h3 { color: #006600;
padding-top: 10px;
}
nav { float: left;
font-weight: bold;
font-size: 1.2em;
width: 150px;
}
dd { font-style: italic;
font-size: .90em;
line-height: 200%;
}
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", serif;
}
footer { font-style: italic;
font-size: .60em;
clear: both;
margin-left: 180px;
}
#wrapper { width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffcc;
min-width: 700px;
max-width: 960px;
padding-top: 0;
padding-right: 0;
padding-bottom: 20px;
padding-left: 30px;
border: 1px ridge #00332B;
border-radius: 15px;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
img { border: none;
}
nav a { text-decoration: none;
display: block;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
}
nav a:link { background-color: #003366;
}
nav a:visited { background-color: #48751A;
}
nav a:hover { border: 3px inset #333333;
}
nav ul { list-style-type: none;
margin: 0;
padding-left: 0;
}
main { margin-left: 180px;
padding-right: 20px;
padding-bottom: 20px;
}
.floatleft { float: left;
padding-right: 20px;
padding-bottom: 20px;
}
.clear { clear: left;
}
#mobile { display: none;
}
#desktop { display: inline;
}
header, nav, main, footer { display: block; }
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="prime.css">
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Prime Properties</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="primelogo.gif" alt="Prime's Company Logo" height="100px" width="600px"></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="listings.html">Listings</a></li>
<li><a href="financing.html">Financing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<p>Prime Properties is prepared to market and sell your property.</p>
<p>The philosophy of Prime Properties is to promote our clients, not ourselves.</p>
<p>We can also help you find the property that meets your needs:</p>
<ul>
<li>location</li>
<li>price</li>
<li>features</li>
</ul>
<div class="contact">
<p>Prime Properties<br>
3055 Bode Road<br>
Schaumburg, IL 60194<br>
</p>
<p><a id="mobile" href="tel:847-555-5555">847-555-5555</a><span id="desktop">847-555-5555</span></p>
</div>
<br>
</main>
<footer>
<br>
Copyright © 2014 Prime Properties<br>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
试试这个css：
@media only screen and (max-width: 1024px) {
body { margin: 0;
padding: 0;
background-color: #FFFFCC;
background-image: none;
}
#wrapper { width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
border-style: none;
}
header { background-image: url(primemobile.gif);
background-repeat: no-repeat;
text-shadow: 2px 2px 2px #000033;
height: 100%;
}
h1 { margin: 0;
text-indent: 0;
font-size: 3.7em;
padding-left: 2em;
white-space: normal;
}
nav { float: none;
width: auto;
margin-top: 0.5em;
}
nav a { padding: 0.2em;
margin-left: 0.3em;
float: left;
}
main { padding: 2.5em 1em 2.5em 1em;
margin: 0;
font-size: 90%;
clear: both;
}
}
@media only all and (max-width: 768px) {
h1 { font-size: 2.4em;
padding-top: 0.25em;
padding-left: 1.5em;
}
nav { width: 98%;
}
nav a { padding: 0.5em;
width: 40%;
float: left;
min-width: 5em;
margin-left: 0.5em;
}
main { padding: 0.6em;
}
.floatleft { float: none;
padding-right: 0;
padding-bottom: 0;
}
h3 { padding-top: 0;
margin: 0;
}
dd { line-height: 100%;
}
footer { padding: 0.5em;
margin: 0;
}
#mobile { display: inline;
}
#desktop { display: none;
}
}
body { background-color: #000033;
color: #003300;
font-family: Arial, Helvetica, sans-serif;
background-image: url(primediagonal.png);
}
header { color: #48751A;
background-image: url(primelogo.gif);
background-repeat: no-repeat;
height: 100px;
}
h1 { text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h2 { color: #003366;
}
h3 { color: #006600;
padding-top: 10px;
}
nav { float: left;
font-weight: bold;
font-size: 1.2em;
}
nav ul li{
display:inline-block;
}
dd { font-style: italic;
font-size: .90em;
line-height: 200%;
}
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", serif;
}
footer { font-style: italic;
font-size: .60em;
clear: both;
margin-left: 180px;
}
#wrapper { width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffcc;
min-width: 700px;
max-width: 960px;
padding-top: 0;
padding-right: 0;
padding-bottom: 20px;
padding-left: 30px;
border: 1px ridge #00332B;
border-radius: 15px;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
img { border: none;
}
nav a { text-decoration: none;
display: block;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
}
nav a:link { background-color: #003366;
}
nav a:visited { background-color: #48751A;
}
nav a:hover { border: 3px inset #333333;
}
nav ul { list-style-type: none;
margin: 0;
padding-left: 0;
}
main { margin-left: 180px;
padding-right: 20px;
padding-bottom: 20px;
}
.floatleft { float: left;
padding-right: 20px;
padding-bottom: 20px;
}
.clear { clear: left;
}
#mobile { display: none;
}
#desktop { display: inline;
}
header, nav, main, footer { display: block; }
答案 1 :(得分：0)
我认为您必须制作更多媒体查询才能为每种格式添加一个。您必须使用某些width为导航设置样式，因为现在每种格式的整个导航都具有150px;的宽度，因此它永远不会大于@media only screen and (max-width: 1024px) {
body { margin: 0;
padding: 0;
background-color: #FFFFCC;
background-image: none;
}
#wrapper { width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
border-style: none;
}
header { background-image: url(primemobile.gif);
background-repeat: no-repeat;
text-shadow: 2px 2px 2px #000033;
height: 100%;
}
h1 { margin: 0;
text-indent: 0;
font-size: 3.7em;
padding-left: 2em;
white-space: normal;
}
nav { float: none;
width: auto;
margin-top: 0.5em;
width: 700px;
}
nav a { padding: 0.2em;
margin-left: 0.3em;
float: left;
width: 20%;
}
main { padding: 2.5em 1em 2.5em 1em;
margin: 0;
font-size: 90%;
clear: both;
}
}
@media only all and (max-width: 768px) {
h1 { font-size: 2.4em;
padding-top: 0.25em;
padding-left: 1.5em;
}
nav {
width: 480px;
}
nav a { padding: 0.5em;
width: 40%;
float: left;
min-width: 5em;
margin-left: 0.5em;
}
main { padding: 0.6em;
}
.floatleft { float: none;
padding-right: 0;
padding-bottom: 0;
}
h3 { padding-top: 0;
margin: 0;
}
dd { line-height: 100%;
}
footer { padding: 0.5em;
margin: 0;
}
#mobile { display: inline;
}
#desktop { display: none;
}
}
body { background-color: #000033;
color: #003300;
font-family: Arial, Helvetica, sans-serif;
background-image: url(primediagonal.png);
}
header { color: #48751A;
background-image: url(primelogo.gif);
background-repeat: no-repeat;
height: 100px;
}
h1 { text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h2 { color: #003366;
}
h3 { color: #006600;
padding-top: 10px;
}
nav { float: left;
font-weight: bold;
font-size: 1.2em;
}
dd { font-style: italic;
font-size: .90em;
line-height: 200%;
}
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", serif;
}
footer { font-style: italic;
font-size: .60em;
clear: both;
margin-left: 180px;
}
#wrapper { width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffcc;
min-width: 700px;
max-width: 960px;
padding-top: 0;
padding-right: 0;
padding-bottom: 20px;
padding-left: 30px;
border: 1px ridge #00332B;
border-radius: 15px;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
img { border: none;
}
nav a { text-decoration: none;
display: block;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
}
nav a:link { background-color: #003366;
}
nav a:visited { background-color: #48751A;
}
nav a:hover { border: 3px inset #333333;
}
nav ul { list-style-type: none;
margin: 0;
padding-left: 0;
}
main {
padding-right: 20px;
padding-bottom: 20px;
}
.floatleft { float: left;
padding-right: 20px;
padding-bottom: 20px;
}
.clear { clear: left;
}
#mobile { display: none;
}
#desktop { display: inline;
}
header, nav, main, footer { display: block; }
@media only screen and (min-width: 1025px) {
main {
margin-left: 180px;
}
}
@media only screen and (max-width: 410px) {
nav {
width: 260px;
}
}
。我已经对每种格式的导航进行了一些额外的媒体查询和一些小调整，因此您将有一个小小的开始
li {
list-style-type: none;
}