用于设备可移植性的列式网格设计它是如何工作的答案

【问题标题】：Column's wise grid designs for device portabilty how it works用于设备可移植性的列式网格设计它是如何工作的
【发布时间】：2013-04-26 06:40:14
【问题描述】：

我会尝试一个需要支持所有设备的模板，大多数设备都推荐我使用网格框架，因为自行使用媒体查询可能会花费时间，但使用框架会很快。现在问题是我不关心网格和我的任务是用基础框架来完成它。！这是最好的方法

*)自己（或）编写媒体查询

*)使用类似基础的框架

并告诉我方法和如何使用它非常感谢提前..！

【问题讨论】：

【解决方案1】：

有两种相反的方式可以完成你的任务。

使用非语义 CSS 网格框架

有许多 CSS 网格框架。其中最受欢迎的可能是：

使用其中任何一种方法的优点是，您可以通过将非语义类应用于 HTML 元素来非常快速地制作网格原型。它们还包含许多方便的装饰样式。

但是这种方法被许多 CSS 开发人员认为是错误的。有很多问题：

通过使用非语义类，您可以混合结构和表示，这样可以快速完成工作，但对于严肃的项目来说是不可接受的。
你强迫你的用户下载一个巨大的 CSS 库，而你在你的网站上几乎不使用它的 10%（我不得不承认 Foundation 允许单独导入其 CSS 库的不同部分，并且存在像 @ 这样的纯网格框架987654324@根本不包含装饰样式）。
您受限于网格系统提供的大小和断点。没有优雅的方法可以覆盖它们。大多数网格系统只提供两种响应样式：小和大，而您可能想要更多（例如手机纵向、手机横向、平板纵向、平板横向、笔记本电脑、台式机）。

SASS 将 CSS 变成了一种编程语言。您可以使用变量、函数、方法，可以包含代码库并使用参数执行它们。可能性几乎是无穷无尽的。您在 SASS 中编写样式，然后将它们编译成所有浏览器都接受的 vanilla CSS。

Compass 是一堆东西在一个名字下：

存在许多 SASS 网格框架。它们允许您在语义上跨越元素。而不是向 HTML 添加类，例如。 G。：

<aside id="sidebar-left" class="grid-2-of-6 grid-4-of-12">

...您将 CSS 应用于现有的选择器，例如。 G。：

#sidebar-left { @include float-span(2); }

另一个优点是您不受默认值的限制。您可以更改列数、宽度、断点。您甚至可以为网页的不同部分设置不同的网格！最有趣的功能是，您可以为不同的屏幕宽度设置不同数量的列（而不仅仅是让您的列变得非常窄）。

在我看来，目前最好的 SASS 网格系统是 Singularity 响应式网格框架。它非常强大和灵活，同时它非常流畅和易于使用（一旦你学习了它）。

对于响应式媒体查询，您可以使用Breakpoint 或者它是喷气推进的伙伴Breakpoint Slicer。使用 Singularity 和 Breakpoint Slicer 构建响应式网格是一种乐趣。

SASS 和 Compass 提供了其他奇妙的优势。例如，您可以非常有效地构建代码。这不是一个合适的地方来描述 SASS 和 Compass 使您的生活更美好的所有方式。我只想说，CSS 与 SASS 相比就像一本字帖和算盘与电子表格处理器相比。我建议你用谷歌搜索 SASS 以了解更多信息。

SASS 方法的缺点是：

你必须研究它。这需要时间。
您必须在 SASS 中保留您的样式。如果要编辑 CSS，则必须编辑 SASS 并重新编译。这并不麻烦，而且有一些方法可以实现自动化，甚至可以集成到部署过程中，但采用它们需要时间和精力。
您的队友也必须使用 SASS，因为每次编译期间都会覆盖 CSS 中的任何更改。
一旦您开始使用 SASS，您就再也不想编写 vanilla CSS 代码了。这实际上并不是真正的劣势。但是您应该意识到，您作为前端开发人员的生活将永远不会一样！

【讨论】：