全响应网格化_建立一个新压缩的响应网格系统

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-10-18 13:41:41 发布 242 阅读 AI 写同款· GEO 优化 ›

全响应网格化

我想和你谈谈柠檬水。不是提神的柑橘饮料，而是我创建的网格系统。

Lemonade是一个网格系统，旨在使设计人员和开发人员有信心建立完全响应的网站，从而消除了浏览器之间寻找错误和错误的轻拂带来的挫败感。让我们看看它是如何组合在一起的，以及如何构建自己的响应式网格系统。

选择正确的网格

在构建自己的布局之前，我经常使用Skeleton.css进行响应式布局。但是，随着时间的流逝，我觉得那是一个失败的事业，仅仅是因为我不断地根据自己的需要调整它，并剥离掉我认为不可用的不必要的元素。这是一个非常好的框架，但是我只推荐给完全不熟悉前端工作的人。

那里有很多网格，框架和库，但是选择正确的网格是一个艰难的决定。最简单的决定方法是问自己“我要做什么？” 例如：我目前正在构建CMS（主要是PHP），并且我根本不想专注于界面（管理面板），因此我选择了Bootstrap 。 Bootstrap是一个非常全面的框架，在设计过程的各个方面都会照顾您。

当生活给你柠檬

我真的很想做些能让我完全控制的事情，而我不必花大部分时间自定义网格。首先，我认为制作网格将是在公园里散步，实际上我以为可以在几个小时内完成。在2013年6月24日上午12:30左右，我打开了编辑器并开始编写代码，其中包括很多代码。但是，出乎意料的是，这很难走。您如何创建已经创建了数百次但更好的东西？我需要提前考虑，我需要创建它自己希望它如何工作，而不是我认为网格系统应该如何工作，因此我为自己设定了三个目标（我将它们写在便签上并贴在墙上）：

体积小，但功能强大
保持现代
有用

让我更详细地介绍这些目标。我希望网格很小，以至于即使我不得不对其进行编辑，也不会因为沮丧而在屏幕上咒骂。它需要在现代浏览器上工作（忘记IE8及更低版本）；我想消除浏览器打滑的情况，这种情况担心一切看起来都不错。最终目标是使用它，我不想做任何事情，只是将其粘贴在GitHub上，而不再使用它。如果要创建某些东西，则需要在我制作的每个项目中使用它。

让我们开始吧

首先让我们解决CSS。记住第一个目标：“小而有力量”

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Attribute selector */
[class*='bit-'] {
  float: left;
  padding: 10px;
}

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
  padding-right: 10px;
  float: right;
}

/* Clearfix */
.frame:after {
  content: "";
  display: table;
  clear: both;
}

从本质上讲，这是网格的Struts。这就是使网格起作用并将整个事物结合在一起的原因。

使用通用选择器设置边框，使我们不必担心元素的填充会干扰宽度。

在讨论选择器的同时，网格中最大的空间杀手是属性选择器。您可以在我使用[class*='bit-']地方看到selctor属性。它以class属性包含 “ bit-”的所有元素为目标。我们还可以使用[class^='bit-']来定位类以“ bit-” 开头的所有元素。使用属性选择器包含我们所有的各种列类，可以在编写新的列宽时为我们节省大量时间。

需要注意的另一件事是使用类型最后选择器[class*='bit-']:last-of-type 。每行“位”将包含在一个frame元素中：

<div class="frame">
     <div class="bit-2"></div>
     <div class="bit-2"></div>    
</div>

使用类型最后选择器，我们可以将组中的最后一个“ bit-”元素作为目标，指示其向右浮动而不是向左浮动。这可以确保在支持浏览器中所有内容都与右侧完全对齐。

关于柠檬水，我经常听到一个常见的问题：“为什么这么奇怪的类名？”这不是一个令人兴奋的故事，我只是在笔记中一直将这些列称为“位”，因此从那里逐渐升级。这样说，我想我下意识地希望这些类不同于在许多其他网格系统中看到的标准“ col-1”。

宽度

我使用计算器生成了列的宽度（请参见，您不必是数学书呆子）。计算列一点都不困难，实际上这确实很容易。例如，在我的网格中，每个位是整个宽度的一部分，位8是八分之一。因此100÷8 = 12.5，因此我们将每个bit-8的宽度设置为12.5％。

我用真实的内容彻底地测试了每个专栏的内容，它们在不同的浏览器和设备上都可以完美运行。

/* Main Widths */
.bit-1  {width: 100%;}
.bit-2  {width: 50%;}
.bit-3  {width: 33.33%;}
.bit-4  {width: 25%;}
.bit-5  {width: 20%;}
.bit-6  {width: 16.6666666667%;}
.bit-7  {width: 14.2857142857%;}
.bit-8  {width: 12.5%;}
.bit-9  {width: 11.1111111111%;}
.bit-10 {width: 10%;}
.bit-11 {width: 9.09090909091%;}
.bit-12 {width: 8.33%;}

现在，您可以看到，这些宽度非常干净，可读，这正是我最初想要的-您可以轻松地查看内容，并在需要时轻松地弄乱和编辑尺寸。

自定义列

编辑Lemonade非常简单。网格系统经常令人生畏，因此我向自己挑战，要使我的工作尽可能简单。自定义Lemonade的唯一规则是： 只要您的列等于100％，它就会完美工作 。添加自己的位很简单，因为属性选择器负责大多数网格结构：

.bit-25 {width:25%;}
.bit-75 {width:75%;}

两者结合起来就可以了。

<div class="bit-25"></div>
<div class="bit-75"></div>

思维敏捷

要使其具有响应能力是非常具有挑战性的，要使其在每个设备上都完美并确定断点，将非常令人沮丧。让我来遍历代码。我选择降低桌面性能，而不是首先使用移动设备，但是哪种方法完全取决于您。

大盘

我们已经设置了基本宽度，现在让我们定位800px至1100px之间的设备：

/*base tablet to small desktop styles*/
@media (min-width: 800px) and (max-width: 1100px) {
  .bit-2,
  .bit-7 {
    width: 100%;
  }

  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }
}

我们可以将这大致描述为将Landscape Tablet定位到台式机（尽管请注意，设备宽度绝不是一成不变的）。这和其他媒体查询一样重要-为什么？因为我发现拥有13英寸笔记本电脑的大多数人很少具有全角浏览器，所以他们将缺少全角浏览器几百个像素，因此横向平板电脑上看起来不错的东西，台式机上也应该看起来不错。

较小的

/*base tablet styles*/
@media (max-width: 800px) {
.bit-4,
  .bit-6,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }

  .bit-1,
  .bit-2,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9,
  .bit-11 {
    width: 100%;
  }
}

我想将这个范围视为将移动设备定位到平板电脑的范围（尽管如此，通过屏幕分辨率定义设备仍然是一个艰难的领域）。为什么会有奇怪的断点？没什么太疯狂的，这只是效果最好的-在宽度必须有多严格方面，网格非常繁琐，而且我发现这些断点在野外效果很好。

色谱柱尺寸的独特性很难创造，这实际上是我大部分时间用于研究的内容。您通常会在台式机上看到哪些内容在移动设备上发生巨大变化？主要是内联内容变成堆叠的内容-因此，我不得不考虑的是，并排放置的内容比什么更可能并排放置。

小

/*base mobile styles - everything 100%*/
@media (max-width: 480px) {
  .bit-1,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9,
  .bit-10,
  .bit-11,
  .bit-12 {
    width: 100%;
  }

这个断点解决了大多数人会认为是移动设备的问题。我试图通过设置移动设备的宽度来变得更具创意，但是我觉得我需要保持基本的水平，因为我想大多数人都不会寻找某种地铁布局或类似的东西。

HTML

HTML非常简单，这就是此网格的优点。为了继续我们的示例，让我们制作一个三格列（例如可以是画廊）。

<div class="frame">
     <div class="bit-3">
          <img src="http://placekitten.com/800/400" />
     </div>
     <div class="bit-3">
          <img src="http://placekitten.com/800/400" />
     </div>
     <div class="bit-3">
          <img src="http://placekitten.com/800/400" />
     </div>
</div>

那里有一个三列响应式浏览器兼容图库。当然，您可以使用HTML并进行所有类型的布局。