关于响应式设计的一些概念和技术
“响应式设计”这个词是Ethan Marcotte在2010年首度提出的,他将其描述为三种技术的混合使用。
第一个是液态网格,这早先已由Gillenwater进行探讨,可以在Marcotte的文章《Fluid Grids》(出版于2009年的《A List Apart》上)中读到。
第二个是液态图像的理念。通过使用相当简单的将设置max-width属性设置为100%的技术,图像可以在包含它们的列变得比图像原始尺寸窄的时候,缩放得更小,但总不会变得更大。这使得图像可以被缩放,以被放到一个灵活尺寸的列,而不是溢出出去,同时也不会在列宽于图像的时候,使图像变得太大以至于画质变得粗糙。
第三个关键的组件是媒体查询。媒体查询使以往Cameron Adams探讨过的、由JavaScript实现的布局类型切换,可以只使用CSS实现。和所有尺寸的屏幕都使用一种布局不同的是,布局是可以改变的:侧栏可以在小屏幕上重新布局,而替代用的导航栏也可以显示出来。
响应式Web设计不是单独的技术,它是描述Web设计的一种方式、或者是一组最佳实践的一个词,它是用来建立可以响应查看内容的设备的样式的一个词。
例如,下面的媒体查询进行测试,以知晓当前的Web页面是否被展示为屏幕媒体(也就是说不是印刷文档),且视口至少有800像素宽。用于.container选择器的CSS将只会在这两件前提存在的情况下应用。
使用媒体查询时的一种通用方式是,为窄屏设备(例如移动设备)创建一个简单的单栏布局,然后检查是否是大些的屏幕,在你知道你有足够容纳的屏幕宽度的时候,开始采用一种多栏的布局 。这经常被描述为移动优先设计
@media screen and (min-width: 800px) {.container {margin: 1em 2em;}
}
现代布局技术
现代布局方式,例如***多栏布局、伸缩盒和网格***默认是响应式的。它们都假设你在尽力创建一个可伸缩网格,而且给了你更容易这样做的方式。
多栏布局
这些布局方式中最老的一个是多个列,即当你指定一个column-count的时候,这意指你希望把你的内容分成多少列。浏览器之后会算出这些列的大小,这是一个随着屏幕尺寸变化的尺寸。
.container {column-count: 3;
}
如果你却去指定column-width的话,你是在指定一个最小宽度。浏览器会尽可能多数量地创建这一宽度的列,只要它们可以恰当地放进容器里面,然后将所有列之间的剩余空间共享出去。因而列的数量会随着空间的多少而改变。
.container {column-width: 10em;
}
伸缩盒
在伸缩盒中,初始的行为是,弹性的物件将参照容器里面的空间的大小,缩小和分布物件之间的空间。通过更改flex-grow和 flex-shrink的值,你可以指示在物件遇到周围有更多或者更少的空间的情况下,你所期望的物件表现。
在下面的示例中,和布局专题的Flexbox: Flexible sizing of flex items中所描述的那样,使用了flex: 1的简写,可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。
.container {display: flex;
}.item {flex: 1;
}
CSS网格
在CSS网格布局中,fr单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着3个大小为1fr的轨道的网格容器。这会创建三个列轨道,每个占据了容器中可用空间的一部分。你可以在Flexible grids with the fr unit下的学习布局网格专题了解更多和这一方式相关的信息。
.container {display: grid;grid-template-columns: 1fr 1fr 1fr;
}
响应式图像
响应式排版
在早期的工作没有考虑的一个响应式设计的元素是响应式排版的理念。本质上讲,这描述了根据屏幕真实使用范围的多少,在媒体查询的同时改变字体大小。
在本例子中,我们想讲我们的一级标题设置为4rem,也就是说它将会有我们的基础字体的四倍大。这真的是个很大的标题!我们只想在大些的屏幕上有这么个超大的标题,那我们先弄个小点的标题,再使用媒体查询,在我们知道用户使用至少1200px的屏幕的时候,拿大些的尺寸覆写它。
html {font-size: 1em;
}h1 {font-size: 2rem;
}@media (min-width: 1200px) {h1 {font-size: 4rem;}
}
使用视口单位实现响应式排版
一个有趣的方式是使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一,即如果你用vw来设定字体大小的话,字体的大小将总是随视口的大小进行改变。
h1 {font-size: 6vw;
}
问题在于,当做上面的事情的时候,因为文本总是随着视口的大小改变大小,用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用viewport单位设定文本。
这里有一个解决方法,它使用了calc(),如果你将vw单位加到了使用固定大小(例如em或者rem)的值组,那么文本仍然是可放缩的。基本来说,是vw加在了放缩后的值上。
h1 {font-size: calc(1.5rem + 3vw);
}
这就是说,我们只需要指定标题的字体大小一次,而不是为移动端设定它,然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。
视口元标签
如果你看看一张响应式页面的HTML源代码,你通常将会在文档的看到下面的标签。
小结:
响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多CSS和HTML的功能和技术,现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站,遇到一个缩放的桌面版网站,或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为Web已经迁移到了这种响应式设计的方式上。
关于响应式设计的一些概念和技术相关推荐
- 前端设计 响应式设计_响应设计简介
前端设计 响应式设计 "Responsive Design" as a buzzword has reached peak popularity: we now have book ...
- 响应式设计的十个基本技巧
为什么80%的码农都做不了架构师?>>> Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也 ...
- Windows10 UWP开发 - 响应式设计
Windows10 UWP开发 - 响应式设计 原文:Windows10 UWP开发 - 响应式设计 Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽 ...
- 使用前端框架Foundation 4来帮助简化响应式设计开发
日期:2013-3-12 来源:GBin1.com Foundation是一套使用广泛的前端开发套件,可以帮助你快速的网站.最近ZURB发布了一个新版本的Foundation 4前端框架,能够有效的 ...
- flex如何做响应式设计_响应式设计-您做错了!
flex如何做响应式设计 Responsive design is not just about the web that automatically adjusts to different scr ...
- 自适应设计与响应式设计
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网 ...
- Html5响应式设计与实现广场
由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...
- 复杂产品的响应式设计【知识篇】
文/乐乘 [导读] 收到后台若干听众反馈,能否有一些设计或交互相关的资料分享.面对此类听众的需求,结合内容编排顺序.技术嘉年华特别准备了一个交互设计&前端的系列文章,预计发文7篇左右,本文是第 ...
- android 类的设计,Android App的类响应式设计
导言 根据google的官方显示Android 4.0以上的设备已经有34.2%,由于国内很多的手机都没机会用上google play市场,所以国内市场的情况,得看类似于友盟的季度报告才知道了.个人觉 ...
最新文章
- 不断提升自己创造溢价的能力
- 从人生(论文)的数量追求人生的质量
- python返回json数据_python和flask中返回JSON数据的方法
- Word2Vec小心得
- C#指定窗口显示位置的方法
- javafx树视图加选框_JavaFX缺少的功能调查:表视图
- 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
- 关于移动端滚动穿透问题的解决
- bzoj 4129 Haruna’s Breakfast 树上莫队
- 使用Nmon监控Linux的系统性能
- python for 循环中使用星号(*),实现分组展开列表
- 小米路由器3开启frp
- Microsoft Office Home and Student 2007产品密匙
- 注册一个域名需要多少钱_购买一个域名要多少钱?
- [UVALive - 4329] Ping pong 树状数组入门
- 济南软件测试行业提出千亿级市场的战略布局
- Yann LeCun:大模型方向错了,智力无法接近人类
- 计算机支持教学管理任务各种应用,2014暑期-多媒体制作与教学资源应用培训讲义-肖玉玉.ppt...
- 计算机视觉需要学习哪些编程语言?
- 邮箱服务发送配置SMTP授权码
热门文章
- Arrays.stream()
- 疫情下如何通过华为云会议提升工作效率【华为云至简致远】
- 浅析“热更新”(热修复)解决方案
- 全国青少年软件编程等级考试Python标准解读(1_6级)
- Javaweb学习笔记——Javaweb概述
- 论文翻译神器:SCITranslate 10.0,一键翻译整篇文献
- linux分区表mbr改gtp,免重装系统 手把手教你MBR转GPT分区表
- linux下cat命令,关于cat >file 、cat <file <<EOF、cat <<-EOF的区别
- 特殊的一些vi指令(快捷键)
- 数字技术战略:开发者体验 —— 内部工具的“最后一公里”