响应式网站 - 在 CSS 中定义移动
Responsive Website - Defining Mobile in CSS
基本上，白色背景样式适用于台式机和平板电脑尺寸，但不适用于移动设备。随着页面变小，我们最终失去了 "Welcome" 后面的白色背景和它下面的段落。如何调整 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 列的网格系统，它只是我们在 class 中使用的指南，所以我不得不说我不太明白它。首先，这是做什么的？
[clas*="col-"]{
width:100%;
}
看起来前 12 列应该适用于平板电脑尺寸，而后 12 列应该适用于桌面尺寸。那么这是否意味着我需要为“/mobile phones first/”部分创建一组新的 12 列 classes？谢谢！
这是 DIV 您的 "Welcome..." 文本位于：
<div class="col-6 col-m-9">
您的 CSS 仅在媒体查询中包含白色背景定义：首先 .col-m-9 用于最小宽度的所有视口尺寸：600px，然后 .col-m-9 用于所有尺寸最小宽度：768px。但是没有 CSS 规则适用于 screens/windows 宽度低于 600px 的 DIV...
所以在上面的DIV上再加一个class，比如
<div class="col-6 col-m-9 col-sm-12">
并为 .col-sm-12 添加一个 CSS 规则来定义白色背景，在宽度低于 600 像素的媒体查询中或在其他规则上方的常规部分中。
基本上，白色背景样式适用于台式机和平板电脑尺寸，但不适用于移动设备。随着页面变小，我们最终失去了 "Welcome" 后面的白色背景和它下面的段落。如何调整 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 列的网格系统，它只是我们在 class 中使用的指南，所以我不得不说我不太明白它。首先，这是做什么的？
[clas*="col-"]{
width:100%;
}
看起来前 12 列应该适用于平板电脑尺寸，而后 12 列应该适用于桌面尺寸。那么这是否意味着我需要为“/mobile phones first/”部分创建一组新的 12 列 classes？谢谢！
这是 DIV 您的 "Welcome..." 文本位于：
<div class="col-6 col-m-9">
您的 CSS 仅在媒体查询中包含白色背景定义：首先 .col-m-9 用于最小宽度的所有视口尺寸：600px，然后 .col-m-9 用于所有尺寸最小宽度：768px。但是没有 CSS 规则适用于 screens/windows 宽度低于 600px 的 DIV...
所以在上面的DIV上再加一个class，比如
<div class="col-6 col-m-9 col-sm-12">
并为 .col-sm-12 添加一个 CSS 规则来定义白色背景，在宽度低于 600 像素的媒体查询中或在其他规则上方的常规部分中。