當我放大屏幕時，我的響應式站點沒有響應

Question

我想讓我的網站具有響應性，但它沒有響應我想要的最小高度更改。 我希望它在到達斷點時改變顏色，以便有人可以分析我的CSS和html並查看wha的錯誤。

謝謝，

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

首先，讓我們真正簡化一下事情：

如何根據窗口寬度快速更改背景顏色

演示： 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 個解決方案

解決方案1
2 2014-10-15 15:16:47

解決方案2
0 2014-10-15 15:17:25

解決方案3
0 2014-10-15 15:20:15

當我放大屏幕時，我的響應式站點沒有響應

問題描述

3 個解決方案

解決方案1 2 2014-10-15 15:16:47

解決方案2 0 2014-10-15 15:17:25

解決方案3 0 2014-10-15 15:20:15

解決方案1
2 2014-10-15 15:16:47

解決方案2
0 2014-10-15 15:17:25

解決方案3
0 2014-10-15 15:20:15