-1

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

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

*) 使用像基础这样的框架

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

4

1 回答 1

2

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

使用非语义 CSS 网格框架

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

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

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

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

使用 SASS 和 Compass 的强大功能

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

指南针是一个名字下的一堆东西：

  • 高效编译 SASS 的便捷工具；
  • 适用于所有场合的大量便捷 SASS 样式库；
  • 您可以在项目中轻松安装和使用的扩展生态系统。

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

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

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

#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 了。这实际上并不是真正的劣势。但是您应该意识到，您作为前端开发人员的生活将永远不会一样！
于 2013-04-26T07:42:54.483 回答