html 响应式同一行,一行CSS实现各种响应式元素

一行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群，并关注我们的微博，谢谢支持。

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

{ 发表评论 }

姓名 (必填)

邮件 (必填)

网站

html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity相关推荐

CSS学习及响应式布局
CSS简介什么是css? cascading style sheet(层叠样式表) 1.如何修饰网页信息的显示样式目前推荐遵循的是w3c发布的css3.0 用来表现XHTNL或者XML等样 ...
[css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
html、css、js、react、vue 文字一行一行显示出来
前端时间在做年报,就不难涉及到年报具有的几大特性: 1.页面滑动特效 2.文字一行一行出现特效 3.页面内动画等等这片文章主要展示一下文字一行一行出现特效代码(react 为例) 先看效 ...
如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站.在本文中,我们将探讨许多可用的工具(围绕html和css),从响应图像 ...
HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
Android 快速实现新手引导层的库，通过简洁链式调用，一行代码实现引导层的显示
NewbieGuide 项目地址:huburt-Hu/NewbieGuide 简介:Android 快速实现新手引导层的库,通过简洁链式调用,一行代码实现引导层的显示更多:作者提 Bug 标 ...
html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...

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

html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity相关推荐

最新文章

热门文章

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

html 响应式 同一行,一行CSS实现各种响应式元素 – Fluidity相关推荐

最新文章

热门文章

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

html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity相关推荐