一行CSS實現(xiàn)各種響應式元素 – Fluidity

3月 31, 2014

評論

Sponsor

FLUIDITY是一個極微小的CSS樣式表，壓縮版只有一行代碼，大小只有115個字節(jié)，它能實現(xiàn)圖像、文本、Canvas、Table表格以及iFrame框架的響應式功能。好用且實用！

這個響應式非常適合用于一般企業(yè)站或文章內(nèi)容上，如果需要表單、layout等支持就需要那些響應式框架了，但那些文件實現(xiàn)太大了，如Bootstrap就已經(jīng)100KB+了，所以我覺得夠用就好，下面一起來看看介紹。

FLUIDITY

響應式圖像

響應式table

響應式canvas元素

響應式iframe框架

使用方法

使用這個CSS是十分簡單的。

STEP1:引入CSS文件

在head內(nèi)嵌入fluidity的css文件。

STEP2:HTML代碼

響應式圖像代碼

響應式table代碼

響應式iframe框架代碼

fluidity.css

下面我們也來看看fluidity.css里面的內(nèi)容，其實就是2行css樣式，十分簡單吧？

img, canvas, iframe, video, svg { max-width: 100%; }

.overflow-container { overflow-y: scroll; }

推薦：查看最受歡迎的 301 個設計網(wǎng)站 → http://hao.shejidaren.com

交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經(jīng)驗、接單、求職、聊設計。

贊助商鏈接

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關(guān)注我們的微博，謝謝支持。

版權(quán)：除非注明，本站文章均為原創(chuàng)文章，轉(zhuǎn)載請聯(lián)系我們授權(quán)，否則禁止轉(zhuǎn)載。

{ 發(fā)表評論 }

姓 名 (必填)

郵 件 (必填)

網(wǎng) 站

總結(jié)

以上是生活随笔為你收集整理的html 响应式 同一行,一行CSS实现各种响应式元素 – Fluidity的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。