css响应式网格布局生成器_基本的响应式网格（加上便捷CSS3媒体查询报告器）

daique1908

关注

翻译最新推荐文章于 2026-08-05 10:25:01 发布 300 阅读 AI 写同款· GEO 优化 ›

css响应式网格布局生成器

自适应网页设计将继续存在。杰弗里·泽德曼（Jeffrey Zeldman）的出版社《除书》（A Book Apart）已出版了一本书，名字叫。 HTML5 Boilerplate在其代码库中内置了响应元素。每个人和他们的叔叔都在宣传他们新的响应式Web模板。

为什么？因为响应式设计使我们能够满足许多（可能是所有）屏幕尺寸的需求-从小型手持设备到平板电脑再到台式机再到巨型宽屏显示器-所有这些都需要一个代码库。

魔术在媒体查询中

随着CSS3 Media Queries的出现，我们有能力创建专门为各种屏幕尺寸设计CSS规则。这些规则在机翼中等待，仅当设备适合媒体查询的参数时在IF上调用。正如安迪·克拉克（Andy Clarke）在其出色的320以上版本中所写的那样，这些媒体查询使我们能够：

仅在需要时逐步加载资产和布局样式

因此，有可能为您的设计生成单个“与设备无关的，一个Web样板”。

这是一件美丽的事

在这个简短的教程中，我将对响应式设计的基本概念进行基本的回顾（或介绍），同时构建一个方便CSS3 Media Query Reporter，在以后的设计项目中可能会很方便。（我知道我有。）

然后，使用该报告程序，我们将迈出第一步，将固定宽度的网格系统转换为流畅的响应式网格系统。今天我们不会构建整个网格，但是我们将获得一些概念，它们将为我们做准备。

我们将在这里做什么：

从一个非常基本的网格开始。
创建一个小CSS3 Media Query Reporter。
使我们的网格流畅而不是固定。
添加媒体查询以帮助网格调整为较小的屏幕宽度。

这将为我们提供概念和工具，以帮助我们应对未来的更大步骤。

1：简介

在这个简短的视频中，我将向您展示我们今天将创建的内容。

下载视频，或通过YouTube 订阅 Webdesigntuts +屏幕录像

2：一个CSS3 Media Query Reporter

构建响应式布局的小挑战之一是确定何时应用某些规则。

例如，您的站点将在什么时候从用于手持设备的单个窄列过渡到多列设计？您是否会有一个大过渡（从一列到多列），或者您将在此过程中提供一到两个中间步骤（一列，两列，八列，等等）？而且，如果您要提供中间步骤-什么时候应用？ 480像素... 768 ... 1024？

屏幕媒体查询报告器是有助于做出这些决定的一件事，当我们超过每个宽度阈值时，它可以提供视觉反馈。

让我们使用CSS3媒体查询来构建这样的工具。

下载视频，或通过YouTube 订阅 Webdesigntuts +屏幕录像

媒体查询报告器的代码

/* ======================================

	MediaQuery-Reporter Styles

========================================= */

body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;
	bottom: 60px;
	width: 100%;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
}
@media only screen and (min-width: 320px) {
	body:after {
		content: "320 to 480px";
		background-color: hsla(90,60%,40%,0.7);
	}
}
@media only screen and (min-width: 480px) {
	body:after {
		content: "480 to 768px";
		background-color: hsla(180,60%,40%,0.7);
	}
}
@media only screen and (min-width: 768px) {
	body:after {
		content: "768 to 1024px";
		background-color: hsla(270,60%,40%,0.7);
	}
}
@media only screen and (min-width: 1024px) {
	body:after {
		content: "1024 and up";
		background-color: hsla(360,60%,40%,0.7);
	}
}

3：迈向流体网格

在准备好Media Query Reporter之后，我们可以使用相同的基本概念来构建响应式网格系统。在这个简短的教程中，我们将仅迈出第一步，但是它将使我们朝正确的方向开始。

在下载的文件style.css ，我提供了一个非常基本的网格系统版本，该版本随附了很棒的Twitter Bootstrap框架。通过将其简化为几行，我们可以轻松掌握将固定宽度网格转换为基于百分比的流体网格所需的处理。

下载视频，或通过YouTube 订阅 Webdesigntuts +屏幕录像

原始基于像素的固定网格CSS

.container {
		width: 940px;
		margin: 0 auto;
	}
	.row {
		margin-left: -20px;
	}
	[class*="span"] {
		display: inline;
		float: left;
		margin-left: 20px;
	} 
	.span-one-third {
		width: 300px;
	}

网格的流畅版本CSS

.container {
		margin: 0 40px;
	}
	.row {
		margin-left: -3%;
	}
	[class*="span"] {
		display: inline;
		float: left;
		margin-left: 3%;
	}
	.span-one-third {
		width: 30%;
	}

4：媒体查询

流体网格是一个开始。但是，即使是流体网格也有其局限性。

一旦屏幕尺寸变得太窄，就没有足够的空间容纳三列并排舒适地生活。这是媒体查询的解救之道。

在下一个视频中，我们将通过提供单个过渡来完善我们的基本网格系统。在小于768像素宽的宽度下，我们的设计将只有一列，以便内容可以轻松地垂直流向窄屏。但是，一旦我们的屏幕尺寸至少为768像素宽，三列布局就会启动，从而使我们能够有效利用可用的屏幕空间。

下载视频，或通过YouTube 订阅 Webdesigntuts +屏幕录像

适用于我们的流体和响应网格CSS

.container {
		margin: 0 40px;
	}
	.row {
		margin-left: -3%;
	}
	[class*="span"] {
		display: inline;
		float: left;
		margin-left: 3%;
	}
@media only screen and (min-width: 768px) {
	.span-one-third {
		width: 30%;
	}
}