讓您的設(shè)計(jì)具有響應(yīng)性

用于快速、直觀地開(kāi)發(fā)響應(yīng)式網(wǎng)站的CSS 框架。提供 12、16 和 24 列的媒體查詢，適用于所有標(biāo)準(zhǔn)設(shè)備、clearfix 和可選重置。

響應(yīng)式 GS 特點(diǎn)：

移動(dòng)優(yōu)先

12、16 和 24 列

清除修復(fù)

可選排水溝

1kb 壓縮

盒子大小的 polyfill

respond.js polyfill

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

標(biāo)記示例

[html]

<div class="容器行">

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

<h1 class="col span_4">網(wǎng)站標(biāo)題</h1>

<h2 class="col span_8">網(wǎng)站描述</h2>

<導(dǎo)航角色=“導(dǎo)航”類(lèi)=“行”>

在此處插入全球?qū)Ш健?span style="white-space:pre">

</nav>

</標(biāo)題>

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

<article class="col span_8 clr">

在此處插入頁(yè)面內(nèi)容。

</文章>

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

在此處插入側(cè)邊欄內(nèi)容。

</aside>

</main>

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

在此處插入頁(yè)腳內(nèi)容。

</頁(yè)腳>

</div>

[/html]

這個(gè)怎么運(yùn)作

[html]

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

<!-- 將此類(lèi)添加到您的頁(yè)面包裝器中，以將其置于瀏覽器窗口的中心并設(shè)置頁(yè)面的寬度。-->

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

/* 將此類(lèi)添加到跨越“容器”整個(gè)寬度的任何元素，以清除任何浮動(dòng)子元素或“col”元素。

還允許您定義行之間的間距，或添加邊框等。單獨(dú)使用此類(lèi)不會(huì)為“col”元素添加排水溝。*/

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

/* 一起使用這兩個(gè)類(lèi)的工作方式與上述相同，并為其中的“col”元素添加排水溝。

如果您不需要排水溝，那么只需單獨(dú)使用“行”類(lèi)。*/

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

/* “col”類(lèi)定義“行”中的每一列，“span_”類(lèi)定義每個(gè)特定列的寬度。

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

在較小的設(shè)備上，除非在媒體查詢中另有定義，否則這些元素將垂直堆疊。*/

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

/* 將此類(lèi)添加到任何元素以清除其浮動(dòng)子元素。

此外，'container'、'row' 和 'col' 默認(rèn)會(huì)清除浮動(dòng)。（又名 - clearfix 方法）*/

[/html]

填充物

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

/* Responsive.gs 現(xiàn)在隨 Christian Schaefer 的 Box-Sizing polyfill 一起提供。

文件路徑必須相對(duì)于您的 HTML 文檔，而不是相對(duì)于您的 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>" 標(biāo)題="<腳本>" />

/* Responsive.gs 現(xiàn)在隨 Scott Jehl 的 Respond.js polyfill 一起提供。

只需將其鏈接到您網(wǎng)站的頭部，并使用此示例中的相對(duì)路徑即可。

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

需要全面重新設(shè)計(jì)網(wǎng)站、從頭開(kāi)始構(gòu)建或其他廣泛的設(shè)計(jì)工作？看看我們的網(wǎng)頁(yè)設(shè)計(jì)公司。