pure响应式布局

最新推荐文章于 2021-06-03 12:06:34 发布

会做饭的技术男

最新推荐文章于 2021-06-03 12:06:34 发布

阅读量208

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hja2kh02jhbb&title=pure%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

 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 }

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"...
复制链接

扫一扫