CSS || 响应式网格

warmcheng 发布于2019-08-29 12:16 / 314人阅读

摘要：响应式网格系统网格布局的作用在于更有效控制元素在网页中所占比例的大小。使用清除浮动的方式确保每个行元素保持在行元素中确保元素内的元素不会溢出到其他行是网格系统中最复杂的部分，包括列元素定位方式，列元素宽度和响应式设计需要。

响应式网格系统

网格布局的作用在于更有效控制元素在网页中所占比例的大小。

比如，博客的留言板块：在屏幕较大时，占据屏幕25%的宽度，出现在博客文章右侧；在屏幕较小时，占据屏幕100%宽度，出现在博客文章的下侧

网格布局是一种实现这种布局需求的方法：将所有宽度分为固定的栏（列）数，从而更高效控制元素宽度

1 基本的网格系统

基本的网格系统包括：容器container、行元素rows、列元素columns和间隙gutter

1.1 container

container的作用：设置整个网格的宽度。容器的宽度一般为100%，可以设置一个max-width

.grid-container {
    width: 100%;
    max-width: 1200px;    /* 可选 */
}

1.2 rows

rows的作用：保持列元素column不会溢出到其他行。使用清除浮动的方式确保每个行元素保持在行元素中

/* 确保row元素内的column元素不会溢出到其他行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

1.3columns

column是网格系统中最复杂的部分，包括列元素定位方式，列元素宽度和响应式设计需要。

列元素定位

float、display:inline-block;、display:table;和display:flex;均可实现列元素定位。先使用float：最常用的并且容易出错。

如果列元素是空的，浮动的列元素会堆在其他元素的顶部。为列元素设置最小高度1px可以避免

[class*="col-"] {
    float: left;
    min-width: 1px;
}

列元素宽度

列元素的宽度通过容器宽度/列数计算而来。容器宽度设置为100%，需要分成6列时，每列的宽度16.66%。

[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
}

如果要设置两列元素的宽的一个section，需要创建一个2倍宽的列元素:通过组合，可以创建出多种宽度

只需要考虑使用列元素组合时，任何一行中列元素增加到6个时的情况

/* 组合多列的宽度 */
  .col-1 {
    width: 16.66%;
}
.col-2 {
    width: 33.33%;
}
.col-3 {
    width: 50%;
}
.col-4 {
    width: 66.664%;
}
.col-5 {
    width: 83.33%;
}
.col-6 {
    width: 100%;
}

列间距Gutter

使用border-box为设置百分比宽度的元素设置固定padding。使用border-box模型可以很轻松创建列宽

.grid-container {
    width: 100%;
    max-width: 1200px;     
    box-sizing: border-box;   /* 需要在百分比宽度中使用固定的padding值 */
}

[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
    /* 设置列间距 */
    padding: 12px;
}

1.4 总结

到此已经完成了一个基础的网格布局系统，可以简单使用。


    
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
    
    
        col-2 
        col-2 
        col-2 
     
    
        col-3 
        col-3

2 实现响应式

只需要调整列元素宽度，便可以调整网页布局适配移动端。

屏幕宽度小于800px时，列宽变为原来的2倍。

问题：col-4、col-5和col-6的宽度会超过100%，需要将其显示设置为100%。

并且col-1出现在col-5之后时：需要将其宽度设置为100%

col-2出现在最后一个元素时：需要将其宽度设置为100%

使用媒体查询来解决不同尺寸屏幕应用不同样式

不处理col-1、col-2时

所以需要处理两种特殊情况:

col-1出现在col-5后；.row .col-2:last-of-type{ width: 100%; }

col-2出现在最后后；.row .col-5 ~ .col-1{ width: 100%; }

@media all and (max-width: 800px) {
    .col-1 {
    width: 33.33%;
    }
    .col-2 {
        width: 50%;
    }
    .col-3 {
        width: 83.33%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }

    /* .row .col-2:last-of-type{
         width: 100%; 
    }
    .row .col-5 ~ .col-1{
        width: 100%; 
    } */
}

元素宽度显著小于800px时，可以让除了col-1之外的元素都为100%宽

@media all and (max-width:650px){
        .col-1{ width: 50%;}
        .col-2{ width: 100%;}
        .col-3{ width: 100%;}
        .col-4{ width: 100%;}
        .col-5{ width: 100%;}
        .col-6{ width: 100%;}
}

专线服务云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111784.html

CSS基础篇--快速使用CSS Grid布局，实现响应式设计

摘要：的个值表示三列，相应的数值表示列宽即都为。尝试其它布局把移到右边实现后的效果使用点来创建空白的网格单元格实现效果真正的响应式布局假设你想在移动设备上查看的是标题旁边是菜单。常用Grid布局属性介绍下面从一个简单Grid布局例子说起。 CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items...

cjie 2019-08-30 14:18 评论0 收藏0
2014 年 15 款最棒的 HTML CSS 框架

摘要：现在，我们来介绍年推荐给设计师的款框架。是一个响应式的以及像素宽度的网格框架，支持平板和手机屏幕显示。框架是一个众多自定义代码组合成的混合体，是一款富有弹性的框架，用来进行响应式网页的快速原型开发。现在，我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表，跟我们分享你的看法吧：） CSS 框架 1) Toast Toast ...

娣辩孩 2019-08-02 17:57 评论0 收藏0
创建自己的 CSS 网格系统【转载 | 译】

摘要：为了防止这种情况，给提供的最小高度并使它们浮动。基本网格准备好了一些额外的列内容样式使我们的网格系统响应调整我们的网格以实现移动布局非常简单。注意本指南只是创建自己响应式网格系统的起点。此文翻译自 Creating Your Own CSS Grid System | Jan，英文不好如有错误 ✖ ，请指正。 CSS 网格已经存在很长时间了。它们通常捆绑在 Bootstrap 等框架...

gecko23 2019-08-30 15:55 评论0 收藏0
CSS Grid布局，实现响应式设计

摘要：效果如图响应式布局例子实现如图效果结构布局使用属性创建一个列的网格，每个列都是一个单位宽度总宽度的。尝试其它布局把移到右边实现后的效果使用点来创建空白的网格单元格实现效果真正的响应式布局假设你想在移动设备上查看的是标题旁边是菜单。columns(列) 和 rows(行) 为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和gri...

pakolagij 2019-04-23 11:44 评论0 收藏0
一行css代码搞定响应式布局

摘要：最精彩的地方在于所有的响应特性被添加到了一行代码中。基础响应单位栅格布局带来了一个全新的值单位，单位通常简写为，它允许你根据需要将容器拆分为多个块。原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻译作者: hanxiansen showImg(https://segmentfault.com/img/re...

appetizerio 2019-08-30 11:12 评论0 收藏0