我刚刚升级了我的网站以包含自适应样式，但是当我上传更改时，后备（原始/流畅）样式不起作用。它只使用最高的最小宽度响应样式。我做错了什么？
我的网站是http://jcwebandgraphic.com/
HTML
<body>
<!-- #nav-bkg: Nav BKG Image Scrollstop -->
<div id='nav-bkg' class='scroll'>
<img src='images/dandelion-nav-color.png'>
<img src='images/dandelion-nav.png'>
</div> <!-- Closes #nav-bkg -->
<!-- nav: Top Nav -->
<nav role='navigation'>
<ul>
<li><a href='#services-section'>Services</a></li>
<!--
<li><a href='#products-section'>Products</a></li>
-->
<li><a href='#work-section'>Work</a></li>
<li><a href='#contact-section'>Contact</a></li>
</ul>
</nav> <!-- Closes Top Nav -->
<!-- #logo: Logo -->
<div id='logo-container'>
<img id='logo' src='images/logo2.png'>
</div> <!-- Closes #logo -->
<!-- #page-wrapper Page Wrapper -->
<div id='page-wrapper' role='main'>
<!-- .scroll: Site BKG Image Scrollstop -->
<div class='scroll'>
<img src='images/dandelion-color.jpg'>
<img src='images/dandelion-greyscale.jpg'>
</div> <!-- Closes .scroll -->
<!-- #about-section: About Me-->
<section id='about-section'>
<h2 class='subtitle'>About Us</h2>
<p>
Welcome! We're a powerful little design house based in the beautiful Pacific Northwest. We specialize in web development, graphic design, hosting, and so much more. Our sophisticated aesthetic and versatile designs are perfect for all your modern web, printing, and signage needs. Check out our remarkably affordable rates below or request a quote for our best pricing option.
</p>
</section> <!-- Closes #about-section -->
<!-- #services-section: Service Types Offered -->
<section id='services-section' class='main-section-styles'>
<h2 class='subtitle'>Services</h2>
<!-- .fa-icon: Large FA Icon Container -->
<div id='fa-icon'>
<div class='icon'>
<i class='fa fa-laptop icon-fixed-width fa-3x'></i>
<h5>Web</h5>
</div>
<div class='icon'>
<i class='fa fa-magic icon-fixed-width fa-3x'></i>
<h5>Graphic</h5>
</div>
<div class='icon'>
<i class='fa fa-connectdevelop icon-fixed-width fa-3x'></i>
<h5>Hosting</h5>
</div>
<div class='icon'>
<i class='fa fa-wrench icon-fixed-width fa-3x'></i>
<h5>IT</h5>
</div>
</div> <!-- Closes .fa-icon -->
</section> <!-- Closes #services-section -->
<!-- #specials: Specials -->
<section id='specials' class='main-section-styles'>
<h2 class='subtitle'>Specials</h2>
<div class='offer'>
<p>
Static Single-Page Site just $99!
</p>
<p>
2 Years of Hosting + IT just $75!
</p>
<br>
<span>
Offers end November 1st, 2015
</span>
</div>
</section> <!-- Closes #specials -->
<!-- #work-section: Portfolio Examples -->
<section id='work-section' class='main-section-styles'>
<h2 class='subtitle'>Work</h2>
<ul class='slider'>
<img src='images/africanbn.png' alt='Professional Project: The African Bridge Project'>
<img src='images/air.jpg' alt='Professional Project: Audio Information Radio'>
<img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'>
<img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'>
<img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'>
<img src='images/placestory.jpg' alt='Student Project: This is Me'>
<img src='images/sote.jpg' alt='Professional Project: Spa of the Earth'>
<img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'>
</ul>
</section>
<!-- #contact-section: Contact Form & Info -->
<section id='contact-section' class='main-section-styles'>
<h2 class='subtitle'>Contact</h2>
<br><br>
Phone: <a href='callto:+13602810359'> 360-281-0359</a>
<address>Email: <a href='mailto:info@jcwebandgraphic.com'> info@jcwebandgraphic.com</a></address>
<br>
<div id='contactform'>
<form action='contact.php' method='post'>
<div class='contact-wrap'>
<p>Your Name :<input class='type' type='text' name='cf_name'></p>
<p>Your E-mail:<input class='type' type='text' name='cf_email'></p>
<p class='antispam'>Spam-Bots!:<input class='type' type='text' name='url' placeholder='** Leave Blank **'></p>
</div>
<div class='contact-wrap'>
<p id='message'>
Message:
<textarea name='cf_message'></textarea>
<input class='button' type='submit' value='Send'>
<input class='button' type='reset' value='Clear'>
</p>
</div>
</form>
</div> <!-- Closes #contactform -->
</section> <!-- Closes #contact-section -->
<footer>
<p id='copyright'>
© JC Web & Graphic 2015
</p>
<!--
<p>
<a href='resume.pdf' target='_blank'>Download Resume</a>
</p>
-->
</footer>
</div> <!-- Closes #page-wrapper -->
</body>
</html>
CSS后备
@media screen and (min-width: 1000px) {
body {
width: 100%;
background-color: #696773;
}
footer {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
/* **************************************** Menu Styles **************************************** */
nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 600;
}
nav ul {
width: 100%;
}
nav ul li {
width: 30.333%;
padding: 1.5%;
text-align: center;
text-decoration: none;
list-style-type: none;
float: left;
}
nav ul li a {
width: 98%;
padding: 2% 7%;
text-decoration: none;
color: #ffffff;
}
nav ul li a:hover {
color: #ffffff;
outline: 1px solid #ffffff;
}
#nav-bkg {
z-index: 500;
}
/* **************************************** Logo Styles **************************************** */
#logo-container {
width: 20%;
margin: 20% 40% 3% 40%;
}
#logo {
width: 100%;
}
/* ************************************* Scrollstop Styles ************************************* */
.scroll {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.scroll img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scroll img:first-child {
opacity: 1;
}
.scroll img:nth-child(2) {
opacity: 1;
transition-duration: 1s;
transition-timing-function: ease;
}
/* ************************************ Main Content Styles ************************************ */
section {
width: 90%;
margin: 0;
margin-top: 1%;
padding: 5%;
background-color: #ffffff;
color: #696773;
overflow: auto;
}
.subtitle {
font-family: 'hipstelveticaultralight';
font-size: 1.9em;
font-weight: 200;
color: #50E5C0;
}
/* Services Section Styles */
#services-section {
width: 34%;
height: 350px;
margin: 2% 1% 2% 5%;
background-color: #696773;
float: left;
opacity: .95;
}
#services-section .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#services-section #fa-icon {
width: 100%;
text-align: center;
}
#services-section #fa-icon .icon {
width: 25%;
color: #f26da5;
float: left;
}
#services-section #fa-icon i {
padding-bottom: 15%;
}
#services-section h5 {
margin-top: 10%;
font-size: .75em;
text-align: center;
color: #ffffff;
border-top: 1px solid #ffffff;
}
/* Specials Section Styles */
#specials {
width: 34%;
height: 350px;
margin: 2% 5% 2% 1%;
background-color: #696773;
color: #ffffff;
float: right;
opacity: .95;
}
#specials .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#specials p {
color: #50E5C0;
}
#specials span {
margin-top: 1em;
font-size: .7em;
float: right;
}
/* Work Section Styles */
#work-section {
width: 80%;
margin: 0 5%;
}
#work-section img {
width: 22%;
padding: 1%;
box-shadow: 0 0 8px #696773;
}
/* Contact Section Styles */
#contact-section {
margin-top: 5%;
color: #ffffff;
background-color: #696773;
opacity: .95;
}
#contact-section .subtitle {
color: #ffffff;
}
.contact-wrap {
width: 50%;
float: left;
}
#contact-section address {
font-style: normal;
}
#contact-section p {
text-indent: 2em;
}
#contact-section p .type {
width: 75%;
margin: .5%;
padding: .5%;
font-size: 1em;
color: #ffffff;
background-color: #696773;
border-radius: 5px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section a {
color: #ffffff;
text-decoration: none;
font-style: normal;
}
#contact-section a:hover {
text-decoration: underline;
}
.antispam ::-webkit-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-ms-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
#contact-section textarea {
width: 78%;
margin: .5%;
padding: .5%;
color: #ffffff;
background-color: #696773;
border-radius: 3px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section #message .button {
width: 20%;
margin: 1.5%;
font-size: .75em;
color: #696773;
background-color: #ffffff;
border: initial;
border-radius: 5px;
border: 1px solid #CCC0B7;
float: right;
}
#contact-section #message .button:hover {
color: #ffffff;
background-color: #696773;
}
/* Footer Section Styles */
footer #copyright {
margin-top: 10%;
padding: .5%;
text-align: center;
color: #686673;
background-color: #ffffff;
}
footer p {
text-align: center;
}
footer a {
padding: 0;
color: #F26DA5;
}
}
CSS响应
@media screen and (min-width: 300px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: hidden;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 70%;
margin: 40% 15% 25% 15%;
}
#logo-container img {
opacity: 1!important;
}
/* ************************************ Menu Styles ************************************ */
nav {
height: 30px;
padding-bottom: 1em;
background-color: #696773;
}
nav a {
font-size: .75em;
}
nav ul li a:hover {
outline: initial;
font-size: 1em;
}
#nav-bkg img {
visibility: hidden;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.25em;
}
p {
font-size: .85em;
text-align: justify;
}
#services-section {
width: 80%;
margin: 5% 10%;
padding: 0;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
#services-section h5 {
margin: 0;
padding: 0;
font-size: 1em;
border-top: none;
}
#specials {
width: 80%;
margin: 5% 10%;
padding: 0;
float: right;
}
#work-section {
width: 100%;
margin: 0;
padding: 0;
}
#work-section .slider img {
width: 96%;
margin: 2%;
padding: 0;
}
#contact-section {
width: 90%;
margin: 15% 0;
padding: 5%;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contact-section p {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
#contact-section p .type {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section .contact-wrap {
width: 100%;
margin: 0;
padding: 0;
float: left;
}
#contactform {
margin-top: 15%;
}
#contact-section textarea {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section #message .button {
width: 50%;
margin: 0;
padding: 0;
}
br {
display: none;
}
}
@media screen and (min-width: 500px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
margin: 45% 15%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
font-size: 1.5em;
}
p {
font-size: 1em;
}
#about-section {
width: 70%;
padding: 10% 15% 20% 15%;
}
#about-section p {
padding-bottom: 20%;
border-bottom: 1px solid #696773;
}
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#specials {
margin: 5% 10% 25% 10%;
}
}
@media screen and (min-width: 600px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 50%;
margin: 45% 25%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.5em;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
}
@media screen and (min-width: 700px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 40%;
margin: 40% 30%;
}
/* ************************************ Menu Styles ************************************ */
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
height: 400px;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
height: 400px;
padding: 0;
float: right;
}
#work-section .slider img {
width: 46%;
margin: 2%;
float: left;
}
}
@media screen and (min-width: 900px) and (max-width: 999px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: visible;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 30%;
margin: 15% 35%;
}
#logo-container img {
opacity: 1;
}
/* ************************************ Menu Styles ************************************ */
nav {
background-color: initial;
}
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
#nav-bkg img {
visibility: visible;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
border: none;
}
#services-section #fa-icon .icon {
width: 25%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
float: right;
}
#work-section {
padding-bottom: 5%;
}
#work-section .slider img {
width: 23%;
margin: 1%;
float: left;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contactform {
margin-top: 5%;
}
}
答案 0 :(得分：0)
因为两个部分都定义为最小宽度，所以当显示区域超过1000px时将应用这两个部分，并且当它超过300px时将仅应用最小宽度：300部分。
由于应用了这两个部分，浏览器将采用标准的css规则来确定类似样式的优先级。 （见http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade）
如果您想更明确，可以指定：
@media screen and (min-width: 300px) and (max-width: 999px)
并且您的响应式样式将在该点之后停止应用。
------------------编辑以回应评论：
如果我理解您要查找的内容，则需要能够嵌套@media查询，但不支持。 例如：
@media screen and (max-width:999px)
{
@media screen and (min-width:300px)
{ }
@media screen and (min-width:600px)
{ }
@media screen and (min-width:900px)
{ }
}
这样你的响应式样式会停在999px，但是到那时它们会累积起来吗？ 我认为完成逻辑写作的唯一方法是使用LESS或SCSS。哪个会编译你的CSS并完全按照你试图避免的方式重写它... 我认为你能做的最好的事情就是：
@media screen and (min-width:300px) and (max-width:999px)
{ }
@media screen and (min-width:600px) and (max-width:999px)
{ }
@media screen and (min-width:900px) and (max-width:999px)
{ }
答案 1 :(得分：0)
或者更好的尝试这样的事情：
@import url(responsive.css) screen and (max-width: 999px);
并在responsive.css中：
@media screen and (min-width:300px)
{ }
@media screen and (min-width:600px)
{ }
@media screen and (min-width:900px)
{ }
在我看到的另一个帖子中提到了这一点：Nesting @media rules in CSS