對於響應站點有問題

Question

我遇到問題以檢測手機，平板電腦和臺式機/筆記本電腦上的時間嗎？我想知道我做錯了什麼。我已經提供了代碼，但它並不完整，但我不明白爲什麼當我將屏幕從移動設備調整到桌面/筆記本電腦顯示器時，一切都不合適。我想知道如何重新設置，因此當我回到桌面視圖時？調整我在網站上顯示的圖像的大小也有問題。我想隨着設備的大小相應地調整大小。我有一個徽標圖像和一個橫幅圖像，這兩個圖像的頂部是導航欄，我也有調整大小的問題，並使其透明，因爲導航欄位於灰色背景之上。我怎樣才能使它在橫幅和標誌上透明。我感謝迄今爲止所獲得的所有幫助。我有很多進步。感謝你們！

下面是HTML代碼：

<nav> 
     <ul> 
      <li><a class="selected" href="index.html">Home</a></li> 
      <li><a href="chat.html">Get Help</a></li> 
      <li><a href="http://community.yesican.org">Community</a></li> 
      <li><a href="resources.html">Resources</a></li> 
      <li><a href="about.html">About YIC</a></li> 
      <li><a href="supportyic.html">Get Involved</a></li> 
     </ul> 
    </nav> 
</header> 


<img id="banner" src="img/banner.jpg"/> 
<!--The main content of the website will go inside of the #wrapper id. It is divided into two sections: #primary & #secondary.--> 
<div id="wrapper"> 
    <!-- Two sections have been created for desktop view to have two columns. Mobile website will just be stacked--> 
    <div id="content"> 
     <section id="primary"><!--Left column content goes here--> 
      <h2>Who We Are</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p> 
      <p><a href="#">This is how a link looks.</a></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p> 
     </section> 

     <section id="secondary"><!--Right column content goes here--> 
      <h2>Memorial</h2> 
      <img src="img/memorial_list.jpg"/> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut.</p> 
     </section> 
    </div> 
</div> 

<!--Footer still needs to be completed--> 
<footer> 
    <div id="footer-right"> 
     <ul><h3>ABOUT</h3> 
      <li><a href="">Contact Us</a></li> 
      <li><a href="">FAQ's</a></li> 
      <li><a href="">Site Map</a></li> 
     </ul> 
     <ul><h3>SUPPORT OUR CAUSE</h3> 
      <li><a href="">Donate</a></li> 
      <li><a href="">Volunteer</a></li> 
      <li><a href="">Fundraising Events</a></li> 
     </ul> 
     <ul><h3>FOLLOW US</h3> 
      <li> 
       <a href="#Facebook handle here"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a> 
       <a href="#Instagram handle here"><img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a> 
       <a href="#Twitter handle here"><img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a> 
       <a href="#Pinterest handle here"><img src="img/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a> 
      </li> 
     </ul> 
    </div> 
    <div id="footer-left"> 
     <p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p> 
     <p id="copyright">Copyright&copy; 2014 International Child Advocacy Network</p> 
    </div> 
</footer> 

這裏是responisve.css代碼：

/*This is the placeholder for responsive CSS that we will implement for mobile design*/ 

    /* Smartphones (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
    /* Styles */ 

#content{ 
text-align:center; 
} 
#body{ 
    float left; font-family:Fabrica 
} 
#nav{ 
text align:center; font-size:.9em; 
} 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
@font-face { 
font-family: 'Fabrica'; 
font-style: normal; 
font-weight: 100; 
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf'); 
} 

} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
@font-face { 
font-family: 'Fabrica'; 
font-style: normal; 
font-weight: 100; 
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf'); 
} 

} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 

}

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 
/************************************* 
TWO COLUMN LAYOUT 

Will target anything larger than average smartphone. 
This is helpful for normal sized tablets, very large smartphones, and very small desktop windows. 
***************************************/ 

#primary { 
width: 50%; 
float: left; 
    padding:10px; 
} 
#secondary { 
width: 40%; 
float: right; 
padding:10px; 
} 

Answer 1

試試這個：

#primary, #secondary { 
    dialay:inline-block; 
    width:45%; 
    padding:.5%; 
    margin:.5%; 
} 

相同的樣式將適用於兩個div。無需浮動。那麼你應該把它們中的兩個包裝在一起：

<dig align=center><div id="primary"><div id="secondary"></div> 

而且它們應該是好的。