반응 형 CSS가 응답하지 않습니다.

Question

Responsive.css가 아직 완료되지 않았지만 장치 크기에 따라 응답 중입니다. 발생하는 문제는 화면 크기를 조정할 때 헤더 기념관, 아래 이미지 및 일부 텍스트가 포함 된 오른쪽 섹션이 화면이 축소 될 때 올바르게 스태킹되지 않는다는 것입니다. 대신, 그것은 아래로 밀려나지만 화면의 오른쪽에 남아 있습니다. 또한 내 사이트에 표시된 이미지 크기를 조정하는 데 문제가 있습니다. 나는 장치의 크기에 따라 크기를 조정하고 싶습니다. 로고 이미지와 배너 이미지가 있고이 두 이미지 위에는 크기 조정과 회색 배경 위에 탐색 모음이 있으므로 투명하게 만드는 문제가있는 탐색 모음이 있습니다. 배너와 로고 위에 어떻게 투명하게 만들 수 있습니까?

<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> 

응답 CSS :

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

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

#content{ 
float:left; 
padding:0; 
} 

#body{ 
float:left; 
font-family: 'Fabrica'; 
} 

#logo { 
margin-right:auto; 
width: auto; 
height: auto; 
padding: 0; 
} 

#wrapper{ 
margin: 0 auto; 
} 

#wrapper p{ 
text-indent: 0; 
} 

#nav ul, nav a:visited{ 
position:relative; 
display:none; 
} 

#nav a:hover { 
display:block; 
} 

#nav li{ 
text-align:center; 
width:100%; 
} 
#banner{ 
position:relative; 
} 

#footer{ 
font-family: 'Fabrica'; 

} 
} 

/* Desktops and laptops ----------- */ 
@media screen and (min-device-width: 1024px){ 
/* Styles */ 
#primary { 
width: 50%; 
float: left; 
padding:10px; 
} 

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

@font-face { 
font-family: 'Fabrica'; 
font-style: normal; 
font-weight: 100; 
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf'); 
} 

홈페이지 CSS :

/*********************** 
GENERAL 
***********************/ 
a { 
text-decoration: none; 
} 

a:hover { 
text-decoration: underline; 
} 

img { 

max-width: 100%; 
} 

body { 
/*font-family: 'Fabrica', 'Courier New';*/ 
font-family: 'Open Sans', sans-serif; 
background-color:#e6e9ed; 
color: #434a54; 
} 

#wrapper{ 
max-width:960px; 
margin: 0 auto; 
background-color: #f5f7fa; 
overflow: auto; /*This fixed the wrapper background color problem that happened bc floating  content*/ 
line-height: 1.8em; 
} 
#wrapper img { 
border-radius:5px 20px 5px; 
} 

#wrapper p { 
text-indent: 2.5em; 
} 

#banner { 
margin-left: auto; 
margin-right:auto; 
padding: 0; 
display:block; 
clear:both; 
} 

#content { 
padding:20px 40px; 
padding-bottom:50px; 
} 

h1, h2, h3 { 
font-family: 'Droid Serif', serif; 
} 


/*********************** 
HEADER - Top image strip above banner 
***********************/ 
#logo { 
text-align:right; 
max-height:100%; 
max-width:100%; 
padding: 10px 0px 10px 30px; 
} 

#header { 
background-image: url(../img/header.jpg); 
background-repeat: no-repeat; 
background-position: top; 
margin: 0 auto; 
max-width:960px; 
} 

/*Commented out for testing new header technique 
#header { 
margin-left: auto; 
margin-right: auto; 
padding: 0; 
display: block; 
clear: both; 
font-family: 'Fabrica', Arial; 
} 

*******/ 

/*********************** 
NAVIGATION - Main site navigation 
***********************/ 
nav{ 
background-color:#4888dc; 
text-align:center; 
color:blue; 
max-width:960px; 
margin: 0 auto; 
text-align:center; 
font-size:1.2em; 
} 
nav ul{ 
list-style:none; 
margin:0 10px; /*Can be change later on in the design if it doesn't work*/ 
} 
nav li{ 
/*Inline, mostly text. Appears in the same line, inline as the rest of the text. Block 
    pushes other items out of the page. Inline block maintains width and 
    height but is in line with other images*/ 
display:inline-block; 
list-style:none; 
padding: .4em 1.5em; 
} 
nav a { 
font-weight: 800; 
} 

nav a:visited, nav a:link { 
color:#f5f7fa; 
text-decoration: none; 
} 

nav a:hover { 
color:#0B108C; 
text-decoration: none; 
} 

/********************** 
FOOTER 
**********************/ 
footer { 
font-family: 'Open Sans', sans-serif; 
max-width:950px; 
background-color:#434a54; 
font-size:0.75em; 
clear:both; 
color:#e6e9ed; overflow:auto; 
margin: 0 auto; 
padding:5px; 
} 
footer h3{ 
padding-left: .9em; 
font-family: 'Open Sans', sans-serif; 
} 

footer ul { 
display:inline-block; 
list-style-type: none; 
} 

footer ul li{ 
list-style:none; 
text-decoration:none; 
margin-left: 1em; 
} 

footer ul li a{ 
color:#e6e9ed; 
} 

footer a:hover { 
color:#FFFFFF; /*Change hover color to make it more prominent*/ 
} 


/********************** 
RIGHT SIDE OF FOOTER 
**********************/ 
#footer-right { 
float:right; 
margin-right:15px; 
} 

.social-icon { 
display:inline-block; 
width:24px; 
height:24px; 
margin-bottom:22.7px; /*controls height of "follow us" in footer*/ 
padding:1px; 
border-radius: 20%; 
} 

/********************** 
LEFT SIDE OF FOOTER 
**********************/ 
#footer-left { 
float:left; 
padding-left: 2em; 
text-align:left; 
font-size: 1.35em; 
display:inline-block; 
line-height: 1.5em; 
} 

#footer-slogan { 
font-family: 'Georgia', 'Droid Serif', sans-serif; 
} 

#copyright{ 
font-size: .75em; 
text-align:left; 
margin-top: 5px; 
display:inline-block; 
font-family: 'Open Sans', sans-serif; 
} 

Answer 1

사용 min-width 대신 min-device-width 및 max-device-width의 max-width. 기기 너비는 창 크기가 아닌 디스플레이의 해상도 (예 : 1024x800)를 나타냅니다.

Answer 2

나는 사용자에게 폭발 I 마케팅 플랫폼을 사용하는 내 반응 디자인이 미디어 쿼리를 사용

@media screen and (max-width: 000px), screen and (max-device-width: 000px) 

이 안드로이드, iphone4,5,6에서 작동

과 아이 패드 + 다른 태블릿