这几天研究了bootstrap响应式布局，其实现原理如下 ：
首先用@media查询当前屏幕的大小，然后根据屏幕大小显示不同样式，样式都是用%定义的。
自己模仿也实现了类似的布局，代码如下：
//html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自己实现栅格布局</title> <link href="css/mystyle.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-4">1-1</div> <div class="col-xs-6 col-sm-4">1-2</div> <div class="col-xs-12 col-sm-4">1-3</div> </div> <div class="row"> <div class="col-xs-3 col-sm-3">2-1</div> <div class="col-xs-6 col-sm-6">2-2</div> <div class="col-xs-3 col-sm-3">2-3</div> </div> <div class="row"> <div class="col-xs-2 col-sm-1">3-1</div> <div class="col-xs-2 col-sm-1">3-2</div> <div class="col-xs-8 col-sm-2">3-3</div> <div class="col-xs-3 col-sm-2">3-4</div> <div class="col-xs-3 col-sm-6">3-5</div> </div> </div> </body> </html>
//css文件 *{ margin:0px; padding:0px; box-sizing: border-box; } .container{ width:100%; max-width: 1201px; } .container,[class*="col-"]{ border:solid 1px #999; } .row:before,.row:after{ content:""; display: table; clear:both; } [class*="col-"]{ float:left; min-height:1px; padding:12px; height:50px; margin:10px; background-color: #eee; font-size:12px; text-align: center; } @media screen and (min- 769px){ .col-sm-1 { width:calc(8.333333% - 20px); } .col-sm-2 { width:calc(16.666666% - 20px); } .col-sm-3 { width:calc(24.999999% - 20px); } .col-sm-4 { width:calc(33.333332% - 20px); } .col-sm-5 { width:calc(41.666665% - 20px); } .col-sm-6 { width:calc(50% - 20px); } .col-sm-7{ width:calc(58.333331% - 20px); } .col-sm-8 { width:calc(66.666664% - 20px); } .col-sm-9 { width:calc(74.999997% - 20px); } .col-sm-10 { width:calc(83.333333% - 20px); } .col-sm-11{ width:calc(91.666666% - 20px); } .col-sm-12 { width:calc(100% - 20px); } } @media screen and (max- 768px){ .col-xs-1 { width:calc(8.333333% - 20px); } .col-xs-2 { width:calc(16.666666% - 20px); } .col-xs-3 { width:calc(24.999999% - 20px); } .col-xs-4 { width:calc(33.333332% - 20px); } .col-xs-5 { width:calc(41.666665% - 20px); } .col-xs-6 { width:calc(50% - 20px); } .col-xs-7{ width:calc(58.333331% - 20px); } .col-xs-8 { width:calc(66.666664% - 20px); } .col-xs-9 { width:calc(74.999997% - 20px); } .col-xs-10 { width:calc(83.333333% - 20px); } .col-xs-11{ width:calc(91.666666% - 20px); } .col-xs-12 { width:calc(100% - 20px);; } }