百度前端技术学院 任务八：响应式网格（栅格化）布局
使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。
示例代码
DOM结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任务八：响应式网格（栅格化）布局</title>
<link rel="stylesheet" type="text/css" href="css/task08.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col">
</div>
<div class="col-md-4 col-sm-6 col">
</div>
<div class="col-md-4 col-sm-12 col">
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col">
</div>
<div class="col-md-6 col-sm-6 col">
</div>
<div class="col-md-3 col-sm-3 col">
</div>
</div>
<div class="row">
<div class="col-md-1 col col-sm-2">
</div>
<div class="col-md-1 col col-sm-2">
</div>
<div class="col-md-2 col col-sm-8">
</div>
<div class="col-md-2 col col-sm-3">
</div>
<div class="col-md-6 col col-sm-3">
</div>
</div>
</div>
</body>
</html>
css示例代码
html,body{
margin: 0;
padding: 0;
}
.container{
box-sizing: border-box;
border: 1px solid #999999;
padding: 10px;
}
.row:after, .row:before{
content: "";
display: table;
clear: both;
}
.col{
box-sizing: border-box;
border: 1px solid #999999;
background-color: #EEEEEE;
height: 50px;
margin: 10px;
float: left;
}
@media only screen and (min-width: 769px) {
.col-md-1{
width: calc(8.333% - 20px);
}
.col-md-2{
width: calc(16.666% - 20px);
}
.col-md-3{
width: calc(25% - 20px);
}
.col-md-4{
width: calc(33.333% - 20px);
}
.col-md-6{
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 768px) {
.col-sm-2{
width: calc( 16.666% - 20px);
}
.col-sm-3{
width: calc( 25% - 20px);
}
.col-sm-6{
width: calc( 50% - 20px);
}
.col-sm-8{
width: calc( 66.666% - 20px);
}
.col-sm-12{
width: calc( 100% - 20px);
}
}
看别人的实现，get到新姿势：使用通配符
/* 包含col-的所有class*/
[class*="col-"] {
float: left;
min-height: 1px;
margin: 10px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #999;
box-sizing: border-box;
background-color: #eee;
}
/* 以col-开头的class */
[class^="col"] {
}
/* 以col-结尾的class */
[class$="col-"] {
}