美文网首页
网页如何利用栅格化做自适应布局

网页如何利用栅格化做自适应布局

作者: LRachel | 来源:发表于2019-10-17 18:40 被阅读0次

    4.建立你的网格系统和布局

    网格系统真的很重要。

    这些技巧都是为了让你做事更简单,并减少你设计时做决定的次数。

    设定好网格系统会让布局和摆放元素变得简单;你甚至不用考虑元素间的摆放距离,因为网格系统都设定好了。

    12列的网格仍是使用最多的一种,因为它可以被最多数整除:1,2,3,4,6和12.

    下图是一个以8px为基准的网格系统设置的例子:

    这是个有着悬浮内容区域的全宽度的app。当浏览器的宽度增加时,这12列网格依然会待在内容区域的中间。

    这是个有着悬浮内容区域的全宽度的app。当浏览器的宽度增加时,这12列网格依然会待在内容区域的中间。

    这是个固定宽度(悬浮)的布局结构,有着全宽度的标题栏

    相关文章

      网友评论

          本文标题:网页如何利用栅格化做自适应布局

          本文链接:https://www.haomeiwen.com/subject/nvpvmctx.html