文档章节

编写第一个响应式页面

凡尘里的一根葱
 凡尘里的一根葱
发布于 2015/11/24 13:47
字数 3388
阅读 70
收藏 2
点赞 0
评论 0

本文为大家讲解如何使用一种科学的方法实现网页设计,从原理上搞清楚什么是响应式设计,并实现一个简易的响应式设计框架,以此为基础,编写出第一个响应式页面。

不知道现在大家还读村上春树吗?在我刚上大学那会儿,一本《挪威的森林》在大伙儿中间传来传去,到最后书都散了架了。这是一种和以前完全不同的阅读体验,那淡淡的忧伤仿佛从书中弥漫出来,感染了已处于青春期尾巴上的我们。

然而,这和响应式页面有什么关系呢?

村上春树这位大叔很可爱,最近,他推出了一个网站,在上面回答读者来信。对于读者抛来的各种问题,他回答的一板一眼,颇有些黑色幽默。下面是该网站首页的截图:

图 1. 村上春树的答读者问网站

村上春树的答读者问网站

很朴素的页面对吗?如果你这样想,那又被“狡猾”的日本人骗了?在平板上、在手机上访问这个网站试试!

或者试试调整浏览器窗口的大小,大家会看到,同样的页面,在不同设备、不同浏览器窗口大小的情况下,页面的显示方式发生变化了。这就是响应式页面,页面会根据不同设备显示尺寸的大小,自动调整页面布局和显示内容,来适应设备,带给读者更好的用户体验。

所以说,村上春树回答读者来信的这个页面看似朴素,实则设计精巧,充分契合了他的写作风格和低调随和的气质。

无独有偶,在作者准备写作此篇文章时,美国白宫的主页也改版为响应式设计,果壳新推出的在行也是响应式的……响应式页面的春天仿佛要来了!欢迎大家上网搜寻一些响应式页面,把地址贴在留言中。

准备

在我们动手实现自己的响应式页面之前,先得掌握几个重要的概念。

HTML 简介

HTML 是 Web 的基本语言,它描述了文档的结构。比如拿一张报纸,我们会看到上面有标题、引文、正文、脚注等等。HTML 也一样,它用各种带有语义的标签,描述了网页的结构。它的语法很简单:

清单 1. HTML 标签语法
<tag attribute=”value”>content</tag>

网页结构全部由 HTML 提供的标签描述,您可参考 MDN 提供的HTML 参考手册自行学习常用的标签。下面给出了一段示例代码,读者可将其复制到文本编辑器中,保存为 HMTL 格式,然后使用浏览器打开,会对 HTML 有一个直观的感受。

清单 2. 示例 HTML 代码
<html>
<body>
<p>
云对雨,雪对风,晚照对晴空。来鸿对去燕,宿鸟对鸣虫。三尺剑,六钧弓,
岭北对江东。人间清暑殿,天上广寒宫。两岸晓烟杨柳绿,一园春雨杏花红。
两鬓风霜,途次早行之客;一蓑烟雨,溪边晚钓之翁。
</p>
<q>
从前,有一个程序员,他得到了一盏神灯 。灯神答应实现他一个愿望。
然后他向神灯许愿, 希望在有生之年能写一个好项目。后来他得到了永生。
</q>
<a href="http://www.ibm.com/developerworks/cn/
  ">http://www.ibm.com/developerworks/cn/</a>
<blockquote>
浪漫的爱是病态的,因为你无法爱很多人,你累积爱的能力,然后将它泛滥出来。
每当你找到一个人,这个泛滥的爱就被投射出来,一个平凡的女人就变成一个天使,
一个平凡的男人就变成神圣的。但当那个洪水过去后,你再度变正常,你会觉得被骗了。
他只是一个平凡的男人,她只是一个平凡的女人。
</blockquote>
</body>
</html>

这里有两个地方值得注意:

  1. 选择标签时,应使用语义相匹配的标签。比如上面的很多标签,也可以使用一个<div>标签代替,但这就使相应部分失去了语义,是一种不好的实现方式。

  2. HTML 只描述文档结构,不描述样式!读者如果用浏览器打开上述示例 HTML 代码,可能会觉得有些疑惑,文中的三段话在样式上看起来很明显不一样啊,这难道不是不同标签带来的效果吗?不是,浏览器会为 HTML 标签提供默认样式,如果在浏览器中禁用所有样式,就会发现它们看上去并无差别。以 Chrome 浏览器为例,可安装 Web Developer 插件来禁用样式。

CSS 简介

CSS(Cascading Style Sheets),中文译作级联样式表,用来定义文档的样式,比如字体、颜色、布局等。它的语法也非常简单:

清单 3. CSS 语法
selector {
property: value;
…
}

您可自行参考CSS 手册,熟悉其使用方法。

CSS 可以定义在 HTML 文档头部、元素里,也可以定义在一个单独的 css 文件中。在实际开发中,为了达到内容和样式的分离,一般都在单独的文件中定义 CSS,这时,就需要在 HTML 文档头部引入 CSS:

清单 4. 引入 CSS 文件
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

CSS 中所谓的级联是指子元素会继承父元素的样式,所以在定义样式时,应先从最上层的元素开始,先定义那些通用的样式,然后再一层层下来,定义各子元素独特的样式。

一切皆盒子

图 2. 盒子模型

盒子模型

您可以随便在浏览器的开发者工具中审查页面上的任意元素,都会发现其外观符合上图所示的一个盒子模型。以该图为例:元素的尺寸为 200×200,内边距为 30,边框为 10,另外上下左右各有 20 和 59 的外边距。在页面上显示时,一个元素的尺寸即包含自身大小,也包含内边距和边框,即图中黑色实线围起来的部分。前端开发人员在编写 CSS 时,要不断计算一个元素的实际显示大小,实在有点繁琐。

万幸的是 box-sizing 属性可以改变 CSS 的盒子模型,将该属性指定为 border-box 后,元素显示时的实际大小即为 CSS 中定义的 width 和 height,而元素的大小则在此基础之上减去内边距和边框的大小,自动适应。以下图为例,如果在 CSS 中加入如下代码,则元素的大小会自动适应,变为 120×120。试试吧!

清单 5. box-sizing
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}

后续内容都基于您了解了什么是盒子模型,并且使用上述 CSS 片段改变盒子模型的行为基础之上,如果对于这个知识点还有疑问,请参考文末的参考资料自行学习掌握。


设计自己的响应式 CSS 框架

上面我们对 HTML 和 CSS 做了简要的介绍,从本节开始,将把重点放在如何实现响应式设计上。为实现响应式页面,必须具备两种能力:首先需要灵活方便的布局方式;其次需要在恰当的时机对页面布局进行调整。在重点讨论这两种方式之前,我们先花点时间研究一下网页的设计原则。

一切皆网格

您打开一个网页,目光会首先聚焦到页面顶部,然后自顶向下,自左向右移动,这是最符合人类行为习惯的。网页设计也遵循同样的原则,将网页自顶向下,自左向右分成不同的单元格。不信的话,您可以随便打开一个网站,看看是否遵循这样的原则。下图是作者的豆瓣页面,我用红颜色的方框画出了大致的单元格,当然,这只是一个粗略的划分,单元格里面的内容还可以划分得更精细。

事实上,一个前端开发者拿到一个设计时,就会对设计进行这样的划分,以此定义 HTML 结构,然后使用 CSS 对页面进行布局,并且调整字体、颜色等,最终实现出符合设计师要求的页面。

那些常用的 CSS 框架对页面也是以网格划分,一般将整个页面划分为 12 列,之所以选择 12,是因为 12 是 2、3、4、6 的最小公倍数,这样就很容易将整个页面划分为 2、3、4……列。

图 3. 一切皆网格

一切皆网格

下面我们看看如何使用 HTML 和 CSS 实现这样的网格系统。简单来说,我们将页面从横向划分为若干行,从纵向划分为 12 列,每一列占整个行宽度的 1/12,这样当页面的大小变化时,每一列的宽度也会按比例放大或缩小。比如下面的 HTML 片段,把页面分成了 4 行,前两行分成两列,后两行分成三列,每列占用不同的页面宽度。

清单 6. 网格-HTML
  <div class="grid">
<div class="row">
<div class="col-2">2 Columns</div>
<div class="col-10">10 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-9">9 Columns</div>
</div>
<div class="row">
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-6">6 Columns</div>
<div class="col-3">3 Columns</div>
</div>
</div>

我们使用如下的 CSS 定义网格,为了调试方便,特意为元素加了 1 个像素的边框。在 CSS 中,我们定义了行宽为 100%,且分别定义了 1 列、2 列……12 列的宽度。

清单 6. 网格-CSS
* {
border: 1px solid red !important;
} 
 .row {
width: 100%;
}

.col-1 {
width: 8.33%;
}

.col-2 {
width: 16.66%;
}

.col-3 {
width: 25%;
}

.col-4 {
width: 33.33%;
}

.col-5 {
width: 41.66%;
}

.col-6 {
width: 50%;
}

.col-7 {
width: 58.33%;
}

.col-8 {
width: 66.66%;
}

.col-9 {
width: 75%;
}

.col-10 {
width: 83.33%;
}

.col-11 {
width: 91.66%;
}

.col-12 {
width: 100%;
}

用浏览器打开页面,效果并不如我们期望的那样,虽然每列的宽度符合我们的预期,但是它们并没有排在同一行内,而是从上到下排列。这一点也不意外,这是浏览器对 HTML 元素默认的布局方式。幸运的是,我们只需要一个 CSS 元素,就可以将布局调整为我们期望的方式。

图 4. 未完成的网格

未完成的网格

flex 布局

flex 布局非常强大,它可以将一个元素的所有子元素以一种弹性的方式布局,按照比例自动填充满元素的宽度。我们只需在上述 CSS 的.row 类更改如下:

清单 7. flex 布局
.row {
width: 100%;
display: flex;
}

如同变戏法一般,我们想要的网格出来了!

图 5. 完成后的网格

完成后的网格

flex 布局还有一个 flex-wrap: wrap 属性,当父元素剩下的宽度容纳不下更多子元素时,会自动将子元素放在下一行显示,这在响应式设计中特别有用。

事实上,这个页面现在已经是响应式页面了,您可以调整浏览器大小,或者在平板、手机上访问该页面,它的内容会根据分辨率大小做出相应调整。

图 6. 响应式的网格

响应式的网格

当然,通常的响应式页面要做的工作更多,不光内容可以自动适应浏览器窗口的大小,布局也要做出相应的调整,甚至在手机或平板上,由于有限的分辨率,需要隐藏一些不重要的内容,以此带给用户更好的体验。

Media Query

这一切都可以通过 media query 实现,media query 可以根据一些判断条件,对页面应用不同的 CSS。比如下面的 CSS 片段,会在浏览器窗口小于 500 像素时,隐藏第一行第二列,并将第三行的背景色改为黄色。

清单 8. Media query
@media only screen and (max-width: 500px) {
.col-4 {
background-color: yellow;
}

.col-10 {
display: none;
}
}
图 7

图 7

事实上,我们已经实现了一个响应式 CSS 框架,使用这一框架我们已经有能力实现一些简单的响应式页面。当然,在实际工作中我们一般不会这么做,我们通常选用已有的 CSS 框架,比如Bootstrap,这些框架的功能更加强大,我们只用编写很少的代码就能实现一个响应式页面。之所以我们要自己设计一个响应式 CSS 框架,是为了理解背后的原理,这样使用其他框架会变得更加容易,而且在框架不能满足需求时,还可以定制自己的框架。


结束语

本文通过实例,为大家讲解了什么是响应式页面,并且介绍了实现响应式页面所需要的基础知识,最后实现了一个简易的响应式 CSS 框架。希望本文能帮助大家开始自己的响应式页面之旅。


本文转载自:http://www.ibm.com/developerworks/cn/web/1507_wangqf_firstrppage/

共有 人打赏支持
凡尘里的一根葱
粉丝 35
博文 101
码字总数 12056
作品 0
深圳
程序员
2018-05-22 仿简书的响应式导航栏

如果你对响应式还一窍不通,请参考2018-05-21 响应式设计,开始你的响应式设计之旅。 1.查看简书的响应式 使用Chorme浏览器打开https://www.jianshu.com,然后F12(Fn+F12),查看网页样式 1....

瑾瑜爱上猫
05/21
0
0
PrimeFaces 5.3 发布,JSF 开发框架

PrimeFaces团队很自豪地宣布5.3版本PrimeFaces正式发布。有235处改进、新的和重新编写的组件,大大提高了响应式设计的功能、辅助功能增强等。 响应式(Responsive)设计 5.3将主要焦点放在提升...

ratking
2015/10/20
2.6K
16
响应式Web设计(三):响应式Web设计的方法

  介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。   首先我们一起来看...

幸福2胖纸
2013/05/06
0
2
【Angular】——表单处理

纯HTML表单:显示表单项,校验用户输入,提交表单数据。就是普通写的HTML页面。 模板式表单:表单的数据模型是通过组件模板中的相关指令来定义的。因为使用这种方式定义表单的数据模型时,我...

fjj15732621696
03/18
0
0
使用 jQuery Mobile 和 CSS3 实现响应式设计

jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻松地创建了一个移动版本的网站,将现有的 Web 页面转换成触摸友好的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接...

IBMdW
2012/05/27
8.6K
3
7个最实用的JavaScript开发工具

在web前端开发中,JavaScript是必备的全能脚本语言,可以创建更加友好的用户交互式网站和应用。但也正是由于JS代码在前端运行,所以很多初学者在刚开始写JS代码的时候,基本上都不会太考虑网...

小懒人23
2016/05/20
267
2
2018-05-21 响应式设计

1.什么是响应式设计? 让一个网站可以兼容不同分辨率的设备。 给用户更好的视觉使用体验。 2.诞生背景 在智能手机还未普及之前,平板电脑之类的终端更没有普及,我们所浏览的网页大多都是通过...

瑾瑜爱上猫
05/21
0
0
Tomcat 的过滤诀窍

新的 Java Servlet 2.3规范有不少最激动人心的功能,其中之一便是过滤。乍一看,Servlet 2.3过滤似乎与 Apache、IIS、Netscape Web服务器及其它服务器中已有的传统过滤器非常相似。事实上,S...

红薯
2008/12/01
322
1
响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱
2015/11/24
129
0
iOS 中的链式编程、函数式编程入门

对一个程序猿来说,从一开始接触编程后会逐渐经历好几个不同的编程思想。包括过程式编程、面向对象编程、响应式编程、函数式编程、链式编程等等。 的特点是随着程序的编写逐步进行,写到哪儿...

BennyLoo
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
9
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0
分布式事务常见的解决方案

随着互联网的发展,越来越多的多服务相互之间的调用,这时候就产生了一个问题,在单项目情况下很容易实现的事务控制(通过数据库的acid控制),变得不那么容易。 这时候就产生了多种方案: ...

小海bug
昨天
3
0
python从零学——scrapy初体验

python从零学——scrapy初体验 近日因为一些事情,需要从网上爬取一些东西,故而想通过使用爬虫来顺便学习下强大的python。现将一些学习中遇到的问题记录下来,以便日后查询 1. 开发环境的准...

咾咔叽
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部