技术控

    今日:0| 主题:63445
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] CSS Grid布局:响应式布局

[复制链接]
与世无争 发表于 2016-10-9 06:24:26
279 1
在本系列的教程当中,你已经熟悉了CSS Grdi的语法,了解了页面布局的一些有效方法,也可以跟以前一些不良的习惯说再见了。在今天这篇文章中,我们将了解有关于CSS Grid布局中有关于响应式网页设计知识。
  媒体查询

  我们从下面这个DEMO开始今天要介绍的内容:
  上面的示例中声明了两个网格,一个是主要网格,另外一个是在一个网格项目中嵌套了一个网格。当这些网格使用媒体查询,可以在不同的视窗中重新定义布局。
   首先容器满足移动端第一,先给 .grid-1 声明一个网格,也就是小于 500px 断点,另外在声明一个网格容器由局:
  1. .grid-1 {
  2.     /* 声明网格样式 */
  3. }
  4. @media only screen and (min-width: 500px) {
  5.     .grid-1 {
  6.         /* 声明网格样式 */
  7.     }
  8. }
复制代码
  一开始声明的网格都放在了一个列里。使用 grid-template-columns 设置一个列,然后使用 grid-template-rows 定义了网格四个行,最后使用 grid-template-areas 来布局:
  1. .grid-1 {
  2.     display: grid;
  3.     width: 100%;
  4.     margin: 0 auto;
  5.     grid-template-columns: 1fr;
  6.     grid-template-rows: 80px auto auto 80px;
  7.     grid-gap: 10px;
  8.     grid-template-areas:    "header"
  9.                             "main"
  10.                             "sidebar"
  11.                             "footer";
  12. }
复制代码
  另外使用 grid-gap 设置了一个 10px 的间距。除此之外,使用 @media 在大于 500px 的屏幕中重新定义了一个网格:
  1. @media only screen and (min-width: 500px) {
  2.     .grid-1 {
  3.         grid-template-columns: repeat(3, 1fr);
  4.         grid-template-rows: 80px auto 80px;
  5.         grid-gap: 20px;
  6.         grid-template-areas:
  7.             "header   header   header"
  8.             "main     main     sidebar"
  9.             "footer   footer   footer";
  10.     }
  11. }
复制代码
  同时在网格项目中( .grid-1 div )设置了 padding 和 font-size 样式。最后效果如下:
   当你的视窗小于 500px 的时候,你看到的是另一种网格布局效果:
   

CSS Grid布局:响应式布局

CSS Grid布局:响应式布局

  网格嵌套

  除了需要考虑主要布局之外,还需要考虑嵌套的网格要一直保持两列布局。为了解决这个问题,实现的方法和前面介绍的方法完全一样,只不过添加了媒体查询的断点,来设置不同的网格:
  1. .item-2 {
  2.     grid-area: main;
  3.     display: grid;
  4.     grid-template-columns: 100%;
  5.     grid-template-rows: auto;
  6.     grid-gap: 10px;
  7.     grid-template-areas:
  8.         "header"
  9.         "article"
  10.         "sidebar";
  11. }
  12. @media only screen and (min-width: 600px) {
  13.     .item-2 {
  14.         grid-template-columns: 1fr 30%;
  15.         grid-template-rows: auto auto;
  16.         grid-gap: 20px;
  17.         grid-template-areas:
  18.             "header header"
  19.             "article sidebar";
  20.     }
  21. }
复制代码
效果如下:
  auto-fill 和 minmax()

  除了采用媒体查询的方法之外,还可以采用另一种方法随着视窗大小,计算网格项目大小和流动方式,从而实现流式布局。
  auto-fill

   我们有方法可以让网格项目自动填充网格的轨道(网格容器)。比如下面的示例中,采用的 grid-template-columns: repeat(4, 1fr) ,表示创建了四个列,而且每个列的宽度都是 1fr ( 1fr 就相当于容器宽度的四分之一)。
   使用 auto-fill 关键词来适合的网格项目填充可用的网格空间。比如下面的示例中,使用 grid-template-columns: repeat(auto-fill 9em) 。其表示的就是每列的列宽度是 9em ,以前在网格容器中填充适应的网格项目。
   注意:同样使用 grid-gap 来设置网格项目之间的间距。
  上面示例中,容器设置了一个黑色背景颜色,示例中清楚的显示有多少可用空间,大家也看到网格项目并没有完全填充整个容器,那么,如果要完全填充网格容器,我们需要怎么做呢?
  minmax()

   minmax() 函数允许我们设置一个最小和最大尺寸,并用于网格项目上。例如,下面的示例中,设置了三列,前两列列宽是 1fr ,最后一列最大列宽是 1fr ,但最小不小于 160px 。
  1. grid-template-columns: 1fr 1fr minmax(160px, 1fr);
复制代码
看到的效果如下:
   当你缩小整个视窗时,前两列的列宽会根据容器的宽度大小进行综放,但最后列表,他的大小将一直是 160px :
   

CSS Grid布局:响应式布局

CSS Grid布局:响应式布局

   回到前面的 auto-fill 示例,如果我们把列宽度设置为 minmax(9em 1fr) ,表示网格最小宽度是 9em ,另外可以按 1fr 进行放大,这样就可以填充整个整容器。
  总结

  接下来把前面的内容做一下小结:
  
       
  • 媒体查询可以帮助我们重新定义网格布局,针对不同的布局给 grid-template-areas 设置不同的值   
  • CSS的Transition对于改变网格布局没有任何影响   
  • auto-fill 关键词可以让网格项目填充网格容器   
  • minmax() 函数可以很好的实现自动填充,保证用完整个容器  
  随着这个系列教程的越来越完善的内容,你现在完全可以在布局使用网格来玩。在接下来的内容中,将以实际的案例来给大家做介绍,让我们一起解决布局相关问题,而且为布局提供最好的解决方案。
  扩展阅读

  
       
  • Grid by Example 29: minmax() and spanning columns and rows   
  • demonstrating minmax() on the Tuts+ homepage layout   
  • auto-fill   
  • minmax()  
   本文根据 @Ian Yates 的《 CSS Grid Layout: Going Responsive 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: https://webdesign.tutsplus.com/tutorials/css-grid-layout-going-responsive--cms-27270 。
     

CSS Grid布局:响应式布局

CSS Grid布局:响应式布局
       大漠

     常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。
过往情殇 发表于 2016-11-12 11:31:35
我们走得太快,灵魂都跟不上了……
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表