Question

我想让我的网站响应，但它没有响应我想要的最小高度变化。我希望它在发现断点时改变颜色，所以有人可以分析我的CSS和HTML并看到错误。

谢谢，

CSS：

@media screen and (min-width: 480px) {
body {background: navy; }
 }
 @media screen and (min-width: 660px;) {
 body { 
     background:  darkgreen;}
 }

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
    <title>Dalexis Peguero | Designer </title>
    <link rel="stylesheet" href="normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet' href="responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Dalexis Peguero</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" >About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>I am not currently looking for new design work, but I am available when I feel confident with my skills. </p>
        <p>Please reach me with email or facebook when it's not an emergency, but if you need an urgent consultation just call me.</p>
      </section>
      <section>
        <h3> Contact Details </h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-5555">555-5555</a></li>
          <li class="mail"><a href="mailto:dalexispeguero@gmail.com">dalexispeguero@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@Dpeguero</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http://facebook.com/dalexisp"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Dalexis Peguero. </p>
      </footer>
    </div>
  </body>
</html>

Answer 1

这可能是你的问题：

<link rel="stylesheet' href="responsive.css">

rel ，正确关闭了引用，因此请更改为：

<link rel="stylesheet" href="responsive.css">

如果没有正确关闭，不加载resposive.css文件

另外，这里有一个不正确的分号：

 @media screen and (min-width: 660px;)

删除它，应该是这样的：

@media screen and (min-width: 660px)

Answer 2

媒体查询中有一点错误，只需删除;

即可

@media screen and (min-width: 480px) {
body {background: navy; }
}
@media screen and (min-width: 660px) {
body {background:  darkgreen;}
}

此外，我会添加一个独家媒体查询：

@media screen and (max-width: 480px) {
body {background: navy; }
}
@media screen and (min-width: 480px) {
body {background:  darkgreen;}
}

Answer 3

首先，让我们真正简化一下：

如何根据窗口宽度
响应性地更改背景颜色

DEMO：http://jsfiddle.net/jua13epq/

@media screen and (min-width: 480px) {
    body {
        background: lime;
    }
}

@media screen and (max-width: 480px) {
    body {
        background: navy;
    }
}

之前你的规则相互矛盾。

请注意我的示例如何使用min-width和max-width来使条件与其他条件互斥。

当我将屏幕放大时，我的响应式网站没有响应

3 个答案: