技术控

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

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

[复制链接]
与世无争 发表于 2016-10-9 06:24:26
213 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在本系列的教程当中,你已经熟悉了CSS Grdi的语法,了解了页面布局的一些有效方法,也可以跟以前一些不良的习惯说再见了。在今天这篇文章中,我们将了解有关于CSS Grid布局中有关于响应式网页设计知识。
  媒体查询

  我们从下面这个DEMO开始今天要介绍的内容:
  上面的示例中声明了两个网格,一个是主要网格,另外一个是在一个网格项目中嵌套了一个网格。当这些网格使用媒体查询,可以在不同的视窗中重新定义布局。
   首先容器满足移动端第一,先给 .grid-1 声明一个网格,也就是小于 500px 断点,另外在声明一个网格容器由局:
  [code].grid-1 {
    /* 声明网格样式 */
}
@media only screen and (min-width: 500px) {
    .grid-1 {
        /* 声明网格样式 */
    }
}[/code]   一开始声明的网格都放在了一个列里。使用 grid-template-columns 设置一个列,然后使用 grid-template-rows 定义了网格四个行,最后使用 grid-template-areas 来布局:
  [code].grid-1 {
    display: grid;
    width: 100%;
    margin: 0 auto;

    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto 80px;
    grid-gap: 10px;

    grid-template-areas:    "header"
                            "main"
                            "sidebar"
                            "footer";
}[/code]   另外使用 grid-gap 设置了一个 10px 的间距。除此之外,使用 @media 在大于 500px 的屏幕中重新定义了一个网格:
  [code]@media only screen and (min-width: 500px) {
    .grid-1 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 80px auto 80px;
        grid-gap: 20px;
        grid-template-areas:
            "header   header   header"
            "main     main     sidebar"
            "footer   footer   footer";
    }
}[/code]   同时在网格项目中( .grid-1 div )设置了 padding 和 font-size 样式。最后效果如下:
   当你的视窗小于 500px 的时候,你看到的是另一种网格布局效果:
   
CSS Grid布局:响应式布局-1 (网页设计,display,screen,media,文章)

  网格嵌套

  除了需要考虑主要布局之外,还需要考虑嵌套的网格要一直保持两列布局。为了解决这个问题,实现的方法和前面介绍的方法完全一样,只不过添加了媒体查询的断点,来设置不同的网格:
  [code].item-2 {
    grid-area: main;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas:
        "header"
        "article"
        "sidebar";
}
@media only screen and (min-width: 600px) {
    .item-2 {
        grid-template-columns: 1fr 30%;
        grid-template-rows: auto auto;
        grid-gap: 20px;
        grid-template-areas:
            "header header"
            "article sidebar";
    }
}[/code]  效果如下:
  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 。
  [code]grid-template-columns: 1fr 1fr minmax(160px, 1fr);[/code]  看到的效果如下:
   当你缩小整个视窗时,前两列的列宽会根据容器的宽度大小进行综放,但最后列表,他的大小将一直是 160px :

CSS Grid布局:响应式布局-2 (网页设计,display,screen,media,文章)

   回到前面的 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 。
12下一页
友荐云推荐




上一篇:Jonah Bailey Steps into Managing Partner Role in Ann Arbor
下一篇:The Eidolon Deploy Process
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

过往情殇 发表于 2016-11-12 11:31:35
我们走得太快,灵魂都跟不上了……
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表