html - 响应式 CSS 问题

Question

我正在使用@media 为设备设置特定样式。但是，它在平板电脑和手机上存在问题。我目前正在使用 S3 和高清 7 记事本平板电脑来测试我网站的响应方面。当我在 S3 上处于横向模式时，内容不会相互堆叠。我希望平板电脑具有此功能，但是当平板电脑处于横向模式时它不会执行此操作。我想知道我做错了什么。我遇到的另一个问题是页脚。当我在平板电脑、手机或笔记本电脑上时，浏览器缩小时会出现奇怪的间距。我想知道如何解决这个问题。谢谢你

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

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

.selected {
 color:#0B108C;
text-decoration: none;
}


  /***********************
  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;
}


nav ul li a.selected { /*Highlights current page for users*/
color:#0B108C;
}


 /**********************
 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;
text-decoration:none;
}

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

 /***********************
 CONTENT TEMPLATE - Content template for all other pages
 ***********************/

 /*Responsive.css*/

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

/* Smartphones ----------- */
@media screen and (max-width: 519px){ 
/* Styles */

#content{ 
float:none;
padding:0;
width: auto;
}

img{
max-width: 100%;
height: auto;
width:auto\9; /*for ie8*/
}

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

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

#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}

h1, h2, h3 {
font-family: 'Fabrica';
} 

nav{
position: relative;
min-height: 40px;
}

nav ul{
position:absolute;
width: 180px;
padding: 5px,0;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(../img/menu-bar-mobile.jpg) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

nav ul:hover li{
display: block;
margin: 0 0 5px;
}

nav a:hover {
display:block;
}

nav li{
display:none;
margin:none;
}

#banner{
display: none;
}

footer{
font-family: 'Fabrica';
float:left;
}
}

/*Ipads and Tablets*/
@media screen and (min-width:520px) and (max-width: 959px) and (orientation: landscape){
footer{
font-family: 'Fabrica';
float: left;
}

body{
font-family: 'Fabrica';
}

#primary {
width: 55%;
float: left;
padding:10px;
}

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

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

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

/*************************************
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.
***************************************/
@font-face {
font-family: 'Fabrica';
font-style: normal;
font-weight: 100;
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf');
}

Answer 1

查看针对横向的媒体查询，它提到的唯一两个元素(页脚除外)是 id=primary 和 id=secondary 的元素。其中一个向右浮动，另一个向左浮动，因此它们不会堆叠 - 这将导致它们 float 到屏幕的相对两侧。

在您的媒体查询中删除 float 并确保它们都是 display:block - 然后它们将一个堆叠在另一个之上。 (注意:我假设您只有一个 #primary 和 #secondary 元素，因为一个 id 只能在一个页面上使用一次)。