复习bootstrap

复习bootstrap
1，一个简单的媒体查询，不同屏幕宽度不同背景颜色，and前后加空格，有向上兼容、向下覆盖等特性

   body{           
   background: #ff6767;       
   }       
   /* 宽度小于768 当亲屏幕最大值为768  需要小于768*/       
   @media screen and (max-width:768px){           
   	body{               
   		background:blue;           
   	}       
   }
   /* 768-992*/       
   @media screen and (min-width:768px) and (max-width: 992px){
             body{               
              	background:green;           
             }       
    }
      /* >1200*/       
   @media screen and (min-width:1200px){           
      body{               
      	background:purple;           
      }       
   }

2，min-width与min-device-width区别，通常我们使用min-width

3，link方式媒体查询引入，通过查询引入不同的样式

   <link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="xx.css">

4，使用媒体查询设置页面结构

*{margin:0;padding:0;}        
/* w<768 子元素宽度为父元素宽度100%        
w 768-992 一行两个 宽度50%        
w 992-1200 一行三个  宽度33%       
w >1200 一行四个 25%        
*/        
.box{            
	width:100%;            
	height: 200px;            
	background-color: #ccc;        
}        
.box>div{            
	width: 100%;            
	height: 100%;            
	background: #ff6767;            
	box-sizing: border-box;            
	border-right:2px solid red;            
	border-bottom:2px solid red;            
	float: left;        
}        
@media screen and (min-width:768px) and (max-width: 992px){
         .box>div{                
         	width: 50%;            
         }        
}        
@media screen and (min-width:992px) and (max-width: 1200px){
          .box>div{                
            	width: 33.33%;            
          }        
}        
@media screen and (min-width:1200px){            
	.box>div{                
		width: 25%;            
	}        
}

5，bootstrap
container布局容器：只有当处于小屏幕的时候才会100%，其余尺寸两边均有空余
container-fluid布局容器：100%始终盛满全屏

类名container套row套col
col-xs-12 col-sm-6 col-md-4 col-lg-3 //这个效果就是屏幕越大占比越小

6，

7，