响应布局
我们上网的时候屏幕有大有小，这就需要做出不一样的页面出来才不会显得单调或太挤了。
例如我们平时上的购物网站，有电脑版的和手机版的，这个就是根据客户的需求做出来的。我们这周讲了响应布局。分别用了两种方法来做。感觉每一种用着都有自己的优缺点，在做网页的时候我们可以先看看需要做成的效果图再来分析用哪种方法。下面我分别讲一下这两种布局：
- 第一种方法我们用@media来判断出屏幕的大小来选择用哪套CSS。其实我的理解就是分别写出几个CSS，然后再根据屏幕的大小来选择用哪个CSS。几个屏幕大小都一样的就可以写在公共的CSS里面。下面我还是写出实例来讲解。
网页的body部分如下：
<body> <div class="container"> <header></header> <div class="content"> <div class="left_nav"> </div> <div class="middle"></div> <div class="right"></div> </div> <footer></footer> </div> </body>
可以看出是用几个div组成的。
下面写CSS部分：
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
margin: auto;
}
header{
100%;
height: 50px;
background: greenyellow;
}
.left_nav{
background: #d9d900;
height: 200px;
}
.middle{
background: #66d987;
height: 200px;
}
.right{
background: #3f8352;
height: 200px;
}
footer{
clear: both;
100%;
height: 100px;
background: #003a00;
}
@media (min- 992px) {
.container{
992px;
}
.content>div{
float: left;
}
.left_nav{
20%;
}
.middle{
60%;
}
.right{
20%;
}
}
@media (max- 992px) and (min- 768px){
.container{
768px;
}
.content>div{
float: left;
}
.left_nav{
30%;
}
.middle{
70%;
}
.right{
display: none;
}
}
@media (max- 768px) {
.container{
100%;
}
.left_nav{
100%;
}
.middle{
100%;
}
.right{
display: none;
}
}
</style>
可以看出第一个@media上面的是公共部分，因为各部分的背景色和高度都没有变化。
@media (min- 992px)就是最小屏幕宽度是992px时就选择这句话后面｛｝里面的CSS样式。
@media (max- 992px) and (min- 768px)就是最小屏幕是768px最大屏幕是992px时就选择这句话后面｛｝里面的CSS样式。
@media (max- 768px) 就是最大屏幕宽度是768px时就选择这句话后面｛｝里面的CSS样式。
下面是整个效果图：
- Bootstrap布局
我们之前就讲过Bootstrap栅格系统。要按屏幕大小来显示不同的布局如果不清楚可以先查查以前讲过的。
先简单讲一下，超小屏幕就是<768px时前缀.col-xs，小屏幕>768px&&<992px时前缀.col-sm,中等屏幕>992px&&<1200px时前缀.col-md,大屏幕>1200px时前缀.col-lg。
我们还是只讲小的三种，大屏幕就不讲了。
还是先看看网页主体：
<body> <div class="container"> <div class="row"> <header class="col-xs-12"></header> </div> <div class="row"> <nav class="col-xs-12 visible-xs left-xs-nav "></nav> <nav class="col-sm-3 hidden-xs left-nav"></nav> <section class="col-xs-12 col-sm-9 col-md-7 content"></section> <aside class="col-md-2 hidden-sm hidden-xs right-aside"> </aside> </div> <div class="row"> <footer class="col-xs-12"></footer> </div> </div> </body>
如上：visible-xs表示在超小屏幕时显示，hidden-xs表示在超小屏幕时隐藏。col-md-2这个表示在中等屏幕时占一行的12份中的两份。如果不清楚可以看看第一篇随笔的讲解。
<style>
*{
margin: 0px;
padding: 0px;
}
header{
background:greenyellow;
height: 100px;
}
.left-nav{
height: 200px;
background: palevioletred;
}
.left-xs-nav{
background: palevioletred;
height: 50px;
}
.content{
height: 200px;
background: paleturquoise;
}
.right-aside{
height: 200px;
background: yellowgreen;
}
footer{
height: 80px;
background: springgreen;
}
</style>
这个的CSS看着要少一些。主要的调整是在body里面就写好的的。
效果图如下：
