一行CSS实现各种响应式元素 – Fluidity

3月 31, 2014

评论

Sponsor

FLUIDITY是一个极微小的CSS样式表，压缩版只有一行代码，大小只有115个字节，它能实现图像、文本、Canvas、Table表格以及iFrame框架的响应式功能。好用且实用！

这个响应式非常适合用于一般企业站或文章内容上，如果需要表单、layout等支持就需要那些响应式框架了，但那些文件实现太大了，如Bootstrap就已经100KB+了，所以我觉得够用就好，下面一起来看看介绍。

FLUIDITY

响应式图像

响应式table

响应式canvas元素

响应式iframe框架

使用方法

使用这个CSS是十分简单的。

STEP1:引入CSS文件

在head内嵌入fluidity的css文件。

STEP2:HTML代码

响应式图像代码

响应式table代码

响应式iframe框架代码

fluidity.css

下面我们也来看看fluidity.css里面的内容，其实就是2行css样式，十分简单吧？

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

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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站