使用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>跟在后面的元素
</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%;
}
} 相关推荐
zhanghao 2019-12-21
zengni 2019-11-06
afeichuanqi 2019-06-28
乔乔 2015-06-13
pangbianlaogu 2014-09-27
nicepainkiller 2019-06-21
nicepainkiller 2019-06-20
菜鸟进化史 2011-03-11
zh000 2017-05-04
zuncle 2016-12-15
乔乔 2016-06-13
soulis 2015-11-25
panduola0 2013-09-22
稀土 2017-10-15