用于快速、直觀地開發(fā)響應式網(wǎng)站的CSS 框架。提供 12、16 和 24 列的媒體查詢,適用于所有標準設備、clearfix 和可選重置。
移動優(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)頁設計公司。