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的元素。其中一个向右浮动，另一个向左浮动，因此它们不会叠加 - 这将导致它们漂浮到屏幕的两侧。

在您的媒体查询中删除浮动并确保它们都显示：阻止 - 然后它们将一个堆叠在另一个之上。（注意：我假设你只有一个#primary和#secondary元素，因为id只能在页面上使用一次。）

响应式CSS问题

1 个答案: