复习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,