骨架和列数
Skeleton and number of columns
我正在尝试将 Skeleton 用于我的下一个项目,但我无法确定它是否像我所想的那样简单。
我认为它唯一开箱即用的功能是当浏览器宽度达到特定断点时将列堆叠在彼此之上吗?
没有办法说"this column has 25% width when >800px, 50% when >600px and 100% when <=600px"吗?
Am I right in thinking that the only thing it does out-of-the-box is stack columns on top of each other when the browser width reaches a specific breakpoint?
正是这样,如果您希望它具有任何其他功能,您需要在声明 skeleton.css 之后添加您自己的 css。
这是一个非常简单的 css 框架,旨在由使用它的人进行定制。
如果您查看底部的 css 文件,您将看到以下代码:
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
您可以在此处添加针对不同屏幕尺寸的自定义 css。
我正在尝试将 Skeleton 用于我的下一个项目,但我无法确定它是否像我所想的那样简单。
我认为它唯一开箱即用的功能是当浏览器宽度达到特定断点时将列堆叠在彼此之上吗?
没有办法说"this column has 25% width when >800px, 50% when >600px and 100% when <=600px"吗?
Am I right in thinking that the only thing it does out-of-the-box is stack columns on top of each other when the browser width reaches a specific breakpoint?
正是这样,如果您希望它具有任何其他功能,您需要在声明 skeleton.css 之后添加您自己的 css。 这是一个非常简单的 css 框架,旨在由使用它的人进行定制。
如果您查看底部的 css 文件,您将看到以下代码:
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
您可以在此处添加针对不同屏幕尺寸的自定义 css。