对于响应站点有问题

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> 

而且它们应该是好的。