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

标签: HTML & CSS 响应式设计 | 发表时间:2014-03-31 07:06 | 作者:设计 达人
出处:http://www.shejidaren.com

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

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

fluidity-css

FLUIDITY

响应式图像

rwd-img

响应式table

rwd-table

响应式canvas元素

rwd-canvas

响应式iframe框架

rwd-iframe

使用方法

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

STEP1:引入CSS文件
在head内嵌入fluidity的css文件。

<link rel="stylesheet" href="css/fluidity.min.css">

STEP2:HTML代码
响应式图像代码

<img src="image.png">

响应式table代码

<div class="overflow-container">
  <table>
    <!-- table 内容 -->
  </table>
</div>

响应式iframe框架代码

<iframe src="https://www.google.com/maps/embed?地图代码" width="100%" height="450" frameborder="0" style="border:0"></iframe>

fluidity.css

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

img, canvas, iframe, video, svg { max-width: 100%; }
.overflow-container { overflow-y: scroll; }

Copyright ©2010-2014 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
交流:UI设计交流群:59300679,与500名设计师交流设计,分享素材。

相关 [css 响应式 元素] 推荐:

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

- - 设计达人
FLUIDITY是一个极微小的 CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像、文本、Canvas、Table表格以及iFrame框架的响应式功能. 这个响应式非常适合用于一般企业站或文章内容上,如果需要表单、layout等支持就需要那些响应式框架了,但那些文件实现太大了,如Bootstrap就已经100KB+了,所以我觉得够用就好,下面一起来看看介绍.

Groundwork:响应式 HTML5,CSS & JavaScript 工具包

- - 博客园_梦想天空
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包. 使用 Groundwork,您可以快速构建 Web 应用程序. Groundwork 拥有一个令人难以置信的灵活,可嵌套,流体的网格系统,是 Github 上的开源项目.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

css固定元素位置(fixed)

- - Web前端 - ITeye博客
我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告. 方法一般是使用js控制,或者使用css. 在IE7以上版本及firefox、opera、safari里,都支持css属性"position:fixed",它的作用就是将元素相对于窗口固定位置.

响应式设计的5个CSS实用技巧

- - Web App Trend
正如我在教程 响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用.

Simple Grid:轻量级的响应式 CSS 网格系统

- - 我爱水煮鱼
使用网格进行网页设计已经是潮流,但是现在有很多 CSS 框架都提供网格功能,用来控制网页上每个元素的位置,但是这些 CSS 框架都是太多功能,而有时我们仅仅需要一个简单的网格系统. Simple Grid 就是一个这样的简洁的 CSS 框架,并且它还是基于响应式布局设计. 基于响应式设计的 Simple Grid,让你可以快速创建适应于手机和平板电脑的网站.

用于响应式设计的9个CSS技巧

- - CSDN博客Web前端推荐文章
现在越来越多的网站文本链接已取消下划线,而这已成为一种 WEB设计趋势,尤其是在做响应式网站时. 下面提供一段简单的CSS代码,可以轻松取消文本链接下划线:. tjkdesign.com给大家,里面提供了许多CSS技巧,帮助你在页面中嵌入响应式视频( . 3.Rollover文本链接. 越来越多的人喜欢在手机上浏览网页,这使得Rollover链接变得越来越流行.

响应式设计-谈谈伪类和伪元素

- - 收集分享互联网资源!
啥是伪元素,我想还是从我们熟悉的东西开始吧. 可能我们最初接触伪类和伪元素应该是从 a (链接标签)开始的,我们通过 :link, :visited, :hover, :active,通过这些伪类,我们就改变了那些链接的文字颜色,也就是说我们改变了被选择元素的某些状态. 关于伪类的定义,我从 MDN 看到的描述是这样的:.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.