讓您的設計具有響應性

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

響應式 GS 特點：

移動優(yōu)先

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">網(wǎng)站標題</h1>

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

<導航角色=“導航”類=“行”>

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

</nav>

</標題>

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

<article class="col span_8 clr">

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

</文章>

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

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

</aside>

</main>

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

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

</頁腳>

</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 現(xiàn)在隨 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 現(xiàn)在隨 Scott Jehl 的 Respond.js polyfill 一起提供。

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

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

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