CSS || 响应式网格
响应式网格系统
网格布局的作用在于更有效控制元素在网页中所占比例的大小。
比如,博客的留言板块:在屏幕较大时,占据屏幕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 总结
到此已经完成了一个基础的网格布局系统,可以简单使用。
<div class="grid-container outline"> <div class="row"> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> </div> <div class="row"> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> </div> <div class="row"> <div class="col-3"><p>col-3</p></div> <div class="col-3"><p>col-3</p></div> </div> </div> <style> * { box-sizing: inherit; } html { box-sizing: border-box; } /* 定义网格容器,设置容器的宽度 */ .grid-container { width: 100%; } /* 确保row元素内的column元素不会溢出到其他行 */ .row::after, .row::before { content: ""; display: block; clear: both; height: 0; overflow: hidden; } /* 避免浮动元素堆叠 */ /* 设置每列元素宽度 */ [class*="col-"] { float: left; min-width: 1px; width: 16.66%; /* 设置列间距 */ padding: 12px; background: #f66; } /* 组合多列的宽度 */ .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%; } /* outline外轮廓设置,突出元素 */ .outline, .outline * { outline: 1px solid #f6a1a1; } /* 其他样式,便于观察 */ /*-- some extra column content styling --*/ [class*='col-'] > p { background-color: #FFC2C2; padding: 0; margin: 0; text-align: center; color: white; } </style>
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%;} }