主要是不采用bootstrap实现网格。
遇到的困难及注意点如下：
1、[class*='col-']，这个是选择col-开头的类，第一次用，以前也只是看到过；
2、媒体查询，总觉得容易理解错误。@media (min- 769px){}代表的是屏幕至少大于等于769px;@media (max- 769px){}代表的是屏幕至少小于等于769px;
3、before,after的用法，还有待进一步去理解。
4、calc（）的运用，注意不要符号之间要留有空格。
5、outline的运用；
6、本想用一个类实现的，但是实际是根据内容的重要性，放大程度不一样。所以得添加多个类，并重新定义。
<!DOCTYPE html> <html> <head> <title>响应式布局</title> <meta charset="utf-8"> <style> html,body{margin: 0px;padding: 0px;} .grid-container{ width: 100%; } .row:before, .row:after { content:""; display: table ; clear:both; } .row{ padding-left: 20px; } [class*='col-'] { float: left; height: 50px; width: 16.66%; background-color: #eee; outline: 1px solid #999; margin: 20px 20px 0 0px; } @media (min- 769px){ .col-md-1{ width: calc(8.33% - 20px); } .col-md-2{ width: calc(16.66% - 20px); } .col-md-3{ width: calc(25% - 20px); } .col-md-4{ width: calc(33.33% - 20px); } .col-md-6{ width: calc(50% - 20px); } .col-md-8{ width: calc(66.66% - 20px); } .col-md-12{ width: calc(100% - 20px); } } @media (max- 768px){ .col-sm-2{ width:calc(16.66% - 20px); } .col-sm-3{ width:calc(25% - 20px); } .col-sm-6{ width:calc(50% - 20px); } .col-sm-8{ width:calc(66.66% - 20px); } .col-sm-12{ width:calc(100% - 20px); } } </style> </head> <body> <div class="grid-container"> <div class="row"> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-12"></div> </div> <div class="row"> <div class="col-md-3 col-sm-3"></div> <div class="col-md-6 col-sm-6"></div> <div class="col-md-3 col-sm-3"></div> </div> <div class="row"> <div class="col-md-1 col-sm-2"></div> <div class="col-md-1 col-sm-2"></div> <div class="col-md-2 col-sm-8"></div> <div class="col-md-2 col-sm-3"></div> <div class="col-md-6 col-sm-3"></div> </div> </div> </body> </html>