响应式网格系统

让您的设计具有响应性

用于快速、直观地开发响应式网站的CSS 框架。提供 12、16 和 24 列的媒体查询，适用于所有标准设备、clearfix 和可选重置。

响应式 GS 特点：

移动优先

12、16 和 24 列

清除修复

可选排水沟

1kb 压缩

盒子大小的 polyfill

respond.js polyfill

[maxbutton id=”1″ url=”https://cdn.bigdropinc.com/uploads/2018/05/responsive.gs_.zip” text=”Download”]

标记示例

[html]

<div class="容器行">

<header role="banner" class="row">

<h1 class="col span_4">网站标题</h1>

<h2 class="col span_8">网站描述</h2>

<导航角色=“导航”类=“行”>

在此处插入全球导航。

</nav>

</标题>

<main role="main" class="row">

<article class="col span_8 clr">

在此处插入页面内容。

</文章>

<aside role="complementary" class="col span_4 clr">

在此处插入侧边栏内容。

</aside>

</main>

<footer role="contentinfo" class="row">

在此处插入页脚内容。

</页脚>

</div>

[/html]

这个怎么运作

[html]

<div class="container"></div>

<!-- 将此类添加到您的页面包装器中，以将其置于浏览器窗口的中心并设置页面的宽度。-->

<div class="row"></div>

/* 将此类添加到跨越“容器”整个宽度的任何元素，以清除任何浮动子元素或“col”元素。

还允许您定义行之间的间距，或添加边框等。单独使用此类不会为“col”元素添加排水沟。*/

<div class="row gutter"></div>

/* 一起使用这两个类的工作方式与上述相同，并为其中的“col”元素添加排水沟。

如果您不需要排水沟，那么只需单独使用“行”类。*/

<div class="col span_4"></div>

/* “col”类定义“行”中的每一列，“span_”类定义每个特定列的宽度。

它们一起用作“行”的子元素。

在较小的设备上，除非在媒体查询中另有定义，否则这些元素将垂直堆叠。*/

<div class="clr"></div>

/* 将此类添加到任何元素以清除其浮动子元素。

此外，'container'、'row' 和 'col' 默认会清除浮动。（又名 - clearfix 方法）*/

[/html]

填充物

[html]*行为：url(/scripts/boxsizing.htc);

/* Responsive.gs 现在随 Christian Schaefer 的 Box-Sizing polyfill 一起提供。

文件路径必须相对于您的 HTML 文档，而不是相对于您的 CSS。更多信息：https://github.com/Schepp/box-sizing-polyfill */

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAAAAAAEAAAIBRAA7"

data-wp-preserve="%3Cscript%20src%3D%22%2Fscripts%2Frespond.min.js%22%3E%3C%2Fscript%3E"

data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" 标题="<脚本>" />

/* Responsive.gs 现在随 Scott Jehl 的 Respond.js polyfill 一起提供。

只需将其链接到您网站的头部，并使用此示例中的相对路径即可。

更多信息在这里：https://github.com/scottjehl/Respond。*/[/html]

需要全面重新设计网站、从头开始构建或其他广泛的设计工作？看看我们的网页设计公司。