Column 为设备便携性设计的智能网格 工作原理

2022-01-18 00:00:00 grid css sass media-queries

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

Am gonna try a template which needs to support all devices most of them recommended me to grid framework because using media query by self may cause time but using framework makes fast.Now the thing is i don't about grid and my task is to finish it with foundation framework.! and which is the best way

*)自己(或)编写媒体查询

*)writing media query by own (or)

*)使用类似基础的框架

*)using framework like foundation

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

and tell me the way and how to use it thanks a lot in advance..!

推荐答案

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

There are two opposite ways to accomplish your task.

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

There are a number of CSS grid frameworks. The most popular of them probably are:

  • 推特 引导;
  • Zurb 基金会;
  • 蓝图.

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

The advantage of using any of those is that you can prototype your grid very quickly by applying the non-semantic classes to your HTML elements. They also contain a lot of handy decorative styles.

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

But this approach is considered faulty by many CSS developers. There are a number of problems:

  • 通过使用非语义类，您可以混合结构和表示，这可以使工作快速完成，但对于严肃的项目来说是不可接受的.
  • 你强迫你的用户下载一个巨大的 CSS 库，而你在你的网站上几乎不使用它的 10%(我不得不承认 Foundation 允许单独导入其 CSS 库的不同部分，并且存在像 960gs 完全不包含装饰样式).
  • 您受限于网格系统提供的大小和断点.没有优雅的方法可以覆盖它们.大多数网格系统只提供两种响应样式:小型和大型，而您可能想要更多(例如手机纵向、手机横向、平板电脑纵向、平板电脑横向、笔记本电脑、台式机).
  • By using non-semantic classes you mix structure and presentation, which is fine to make the job done quickly but unacceptable for a serious project.
  • You force your users to download a huge CSS library while you barely use 10% of it on your website (i have to admit that Foundation allows to import different portions of its CSS library separately, and there exits pure grid frameworks like 960gs that don't contain decoration styles at all).
  • You are limited with the sizes and breakpoints provided by the grid system. There's no elegant way to override them. Most of grid systems provide only two responsive styles: small and large, while you may want more (e. g. phone portrait, phone landscape, tablet portrait, tablet landscape, laptop, desktop).

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

SASS turns CSS into kinda programming language. You can use variables, functions, methods, you can include libraries of code and execute them with your parameters. The possibilities are almost endlest. You write your styles in SASS and then complile them into vanilla CSS accepted by all browsers.

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

Compass is a bunch of things under one name:

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

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

There exist a number of SASS grid frameworks. They allow you to span your elements semantically. Instead of adding classess to HTML, e. g.: 

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

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

...you apply CSS to existing selectors, e. g.: 

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

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

Another advantage is that you're not limited with the defaults. You can alter the number of columns, their width, the breakpoints. You can even have different grids for different portions of the web page! And the most tasty feature is that you can have different number of columns for different screen widths (instead of just making your columns ridiculously narrow).

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

In my opinion, the best SASS grid system out there is Singularity responsive grid framework. It is extremely powerful and flexible and at the same time it's very smooth and simple to use (once you study it).

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

For responsive media queries you can use Breakpoint or it's jet-propelled sidekick Breakpoint Slicer. Building a responsive grid with Singularity and Breakpoint Slicer is a pleasure.

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

SASS and Compass provide other fantastic advantages. For example, you can structure your code very efficiently. It's not a proper place do describe all the ways with which SASS and Compass make your life better. I'll just say that CSS compared to SASS is like a copybook and abacus compared to a spreadsheet processor. I suggest that you google for SASS to learn more.

SASS 方法的缺点是:

The downsides of the SASS approach are:

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

相关文章