百度前端技术学院 任务八：响应式网格（栅格化）布局
使用 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- 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- 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-"] { }