pure响应式布局
Posted 不忘初心 方得始终
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了pure响应式布局相关的知识，希望对你有一定的参考价值。
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 }
以上是关于pure响应式布局的主要内容，如果未能解决你的问题，请参考以下文章