基本上，白色背景样式适用于台式机和平板电脑尺寸，但不适用于移动设备。随着页面变小，我们最终会失去“欢迎”后面的白色背景和下面的段落。如何调整我的 CSS 以便背景适用于所有尺寸？ 
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Knights Basketball Academy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles3.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var slideimages = new Array(); // create new array to preload images
slideimages[0] = new Image(); // create new instance of image object
slideimages[0].src = "images/slider1.png"; // set image src property
to image path, preloading image in the process
slideimages[1] = new Image();
slideimages[1].src = "images/slider2.png";
slideimages[2] = new Image();
slideimages[2].src = "images/slider3.png";
slideimages[3] = new Image();
slideimages[3].src = "images/slider4.png";
</script>
</head>
<body>
<header id="header-wrap">
<div id="fixed">
<div class="row"><!--first row-->
<div id="images">
<a href="index.html">
<img id="logo" src="images/logo2.png" alt="logo"
height="250" width="250">
</a>
<img id="text" src="images/header.png" alt="header"
height="250" width="880">
<div id="socialIcons">
<div class="social">
<a href="#"><img src="images/twitter.png"></a>
</div>
<div class="social">
<a href="#"><img src="images/facebook.png"></a>
</div>
<div class="social">
<a href="#"><img src="images/youtube.png"></a>
</div>
<div class="social">
<a href="#"><img src="images/instagram.png"></a>
</div>
</div>
</div>
</div><!--ends first row-->
</div>
</header>
<div class="navigation">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
</div>
<div id="background"><!--background image-->
<div class="row"><!--second row-->
<div style="text-align:center"><!--image slider-->
<img src="images/slider1.png" id="slide" width="713" height="250" />
<script type="text/javascript">
//variable that increments through the images
var step=0;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src;
if (step<3)
step++;
else
step=0;
//call function "slideit()" every 5 seconds
setTimeout("slideit()",5000);
}
slideit();
</script>
</div>
</div>
<div class="row"><!--third row-->
<div class="col-3 col-m-3">
<img src="images/image5.jpg" alt="Team Photo">
</div>
<div class="col-6 col-m-9">
<h1>Welcome</h1>
<p>Knights Basketball Academy is a non-profit
amateur basketball club focused on individual player development
and team concepts. With our elite coaching staff, we are
confident that all players can achieve their own maximum potential
while maintaining excellent character and integrity.
<br>
<br>
Contact us at info@knightsbasketballacademy.com to learn how to
become a Knight today.</p>
</div>
<div class="col-3 col-m-12">
<aside>
<h2>What?</h2>
<p>This is information about the website</p>
<h2>Where?</h2>
<p>This website was created in St. Louis, MO.</p>
<h2>How?</h2>
<p>Visit our contact page for more information.</p>
</aside>
</div>
</div><!--ends third row-->
<footer>
<p>©2016 KNIGHTS BASKETBALL ACADEMY</p>
</footer>
</div><!--ends background-->
</body>
</html>
CSS:
*{box-sizing:border-box;}
.row:after{content:"";
clear:both;
display:block;}
[class*="col-"]{float:left;
padding:10px;}
/*global styles*/
#header-wrap {position:relative;
top:0;
width:100%;
min-height:260px;
height:100%;
z-index:9999;
background:#fff;}
#fixed {position:fixed;
width:100%;
top:0;
background-color:#fff;}
.knights {margin-top:0px}
.logo img {max-width:100%;
height:auto;}
img#logo {width:250px;
height: 250px;
float:left;
margin-left:30px;}
img#text {margin-top:50px;
float:left;
margin-left:125px;
width:650px;}
#images {width:1400px;}
#socialIcons {padding-top:10px;
margin-left:1264px;}
.fixed{position:fixed;
width:100%;
top:0;
background-color;}
.social {float:left;
margin-left:2px;
margin-right:2px;}
.banner {display: inline-block;
margin-left:auto;
margin-right:auto;}
.navigation {text-align:center;
background-color:#000000;
padding:0px;}
#banner {text-align:center;
margin-bottom: 0px;}
#background {background-image: url("images/background.jpg");}
a{text-decoration:none;
color:white;}
a:visited {color:white;}
nav{margin:auto;
height:auto;}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:Arial;}
nav li {
padding: 10px;
margin-bottom: 7px;
background-color :#000000;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px
rgba(0,0,0,0.24);
display:block;
margin-left:30px;
margin-right:30px;}
nav li:hover {
background-color: #8E8E8E;}
aside{background-color:#C5202A;
padding:15px;
color:#fff;
text-align:center;
font-size:1.1em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);}
footer{background-color:#000000;
color:#fff;
text-align:center;
font-size:0.9em;
padding:15px;}
img{max-width:100%;
height:auto;
}
/*mobile phones first*/
[class*="col-"]{
width:100%;
}
/*tablet*/
@media only screen and (min-width:600px)
{
/*12 column grid*/
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%; background-color:white;margin-top:10px;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
nav {height:auto;}
nav li {display:inline-block;}
}
@media only screen and (min-width:768px)
{
/*12 column grid*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%; background-color:white;margin-top:10px;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
nav {height:auto;}
nav li {display:inline-block;
text-align:center;}
}
div.clear { clear:both;}
我没有在 CSS 中创建这个 12 列的网格系统，它只是我们在类里面使用的指南，所以我不得不说我不太理解。首先，这是做什么的？
[clas*="col-"]{
width:100%;
}
看起来前 12 列应该适用于平板电脑尺寸，而后 12 列应该适用于桌面尺寸。那么这是否意味着我需要为“/mobile phones first/”部分创建一组新的 12 列类？谢谢!
最佳答案
这是您的“欢迎...”文本所在的 DIV:
<div class="col-6 col-m-9">
您的 CSS 仅在媒体查询中包含白色背景定义:首先为 .col-m-9 提供最小宽度为 600px 的所有视口(viewport)尺寸，然后为 .col-m -9 适用于最小宽度为 768 像素的所有尺寸。但是没有适用于宽度低于 600 像素的屏幕/窗口上的该 DIV 的 CSS 规则...
所以在上面的DIV中再增加一个类，例如
<div class="col-6 col-m-9 col-sm-12">
并为 .col-sm-12 添加一个定义白色背景的 CSS 规则，在宽度低于 600 像素的媒体查询中或在其他规则上方的常规部分中。
关于html - 响应式网站 - 在 CSS 中定义移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35416893/