1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1"><!--viewport meta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度，需要加入该行--> 6 <title></title> 7 <link href="css/demo1.css" rel="stylesheet" /> 8 <link href="css/pure-min.css" rel="stylesheet" /><!--将pure引入页面--> 9 <link href="css/grids-responsive-min.css" rel="stylesheet" /><!--引入响应式pure的栅格系统--> 10 </head> 11 <body> 12 <div class="pure-g" id="d1"><!--固定写法必须放在class=pure-g里面--> 13 <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div><!--单元格大小是分数--> 14 <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div> 15 <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div> 16 <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div> 17 <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div> 18 <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div> 19 <!--<div class="pure-u-1 pure-u-sm-2-5 pure-u-md-4-5"><p>AAAA</p></div>两个单元格相加要等于1 20 <div class="pure-u-1 pure-u-sm-3-5 pure-u-md-1-5"><p>AAAA</p></div>--> 21 </div> 22 </body> 23 </html>
1 #d1 p{ 2 background-color:#0094ff; 3 padding:50px; 4 margin:10px; 5 }
原文：http://www.cnblogs.com/snow52132/p/7199693.html