使用mediaquery自制栅格系统初探
html代码
<body>
<div class="myContainer">
<div class="myCol"><div class="content">内容1</div></div>
<div class="myCol"><div class="content">内容2</div></div>
<div class="myCol"><div class="content">内容3</div></div>
<div class="myCol"><div class="content">内容4</div></div>
</div>
<span>跟在后面的元素</span>
</body>
css代码
/*box-sizing:border-box 可以实现width = content width + padidng 的效果,比默认的盒模型更加好用和直观*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*行容器*/
.myContainer{
width: 100%;
border: none;
padding: 0;
position: relative;
}
/*清除浮动*/
.myContainer:after{
clear:both;
display:block;
content:""
}
/*列栅格*/
.myCol{
width: 100%;
padding-left:15px;
padding-right:15px;
position: relative;
float:left
}
/*每一块栅格内容标出背景颜色方便区分*/
.content{
background:#eeeeee
}
/*当屏幕宽度大于768px时*/
@media (min-width: 768px) {
.myCol{
width: 50%;
}
}
/*当屏幕宽度大于992px时*/
@media (min-width: 992px) {
.myCol{
width: 33.33333333%;
}
}
/*当屏幕宽度大于1200px时*/
@media (min-width: 1200px) {
.myCol{
width: 25%;
}
}