编写第一个响应式页面

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

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

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

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

图 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 框架。希望本文能帮助大家开始自己的响应式页面之旅。


转载于:https://my.oschina.net/huangcongcong/blog/534711

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286573.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

container 的背后

如果要看laravel的单个功能的源代码&#xff0c;首先去找对应得ServiceProvider,例如加密功能hash,则按一下步骤查看源代码&#xff1a; HashServiceProvider.php(主要是看register方法) singleton()方法就是将BcryptHasher这个类实例化一次&#xff0c;然后在哪里都可以用&…

android中像素单位dp、px、pt、sp的比较

dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关&#xff0c;一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个&#xff0c;不依赖像素。px: pixels(像素). 不同设备显示效果相同&#xff0c;一般我们HVGA代表320x480像素&…

ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换

大家都熟知,MODIS NDVI数据的处理一般是在MRT中进行的,但熟不知ArcGIS中也可以实现投影变换个数据格式的转换,本文就以MOD13Q1.A2020001.h26v05.006.2020018002618.hdf这一景影像为例,实现将正弦曲线投影转换为Albers等积投影,将hdf格式转为tif。 ArcGIS python批处理代码…

开源项目千千万,如何发现好项目

视频来自 OSSInsight 推特。不知道大家听说没有 PingCAP 推出的一个 OSSInsight.io 网站&#xff0c;可以根据 GitHub 上的事件&#xff0c;提供开源软件洞察&#xff0c;这个项目也开源在 GitHub[1] 上。它可以提供以下方面的洞察能力&#xff0c;有点类似于 Google Analytics…

Git之回退已经提交到远程仓库的代码(已经push的代码)

1 问题 git 把当前的修改已经push到远程仓库&#xff0c;现在需要回退这个远程提交 2 解决办法 1&#xff09;、我们用git log命令找到commit Id d6434e39e842a40b79119b2b88e76dd1498f8654是我最后一次提交&#xff0c; 然后我们现在需要回退到145c4fc7f237176acba1bca515e9…

构建微型数据中心——在laptop上运行Rancher

对于开发人员而言&#xff0c;他们的最终目标是拥有自己的数据中心&#xff08;data center&#xff09;&#xff0c;使他们能够在贴近真实情况的副本上测试他们的服务。然而&#xff0c;开发人员的开发过程中却充满了妥协。因为&#xff0c;数据要么是个简化集&#xff0c;要么…

【前端就业课 第一阶段】HTML5 零基础到实战(五)基础元素

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可&#xff08;知识点结构参考《HTML5入门到精通》&#xff09; 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&…

phpUnit 安装,实例和简单部署

背景&#xff1a;一个小脚本&#xff0c;保证稳定为主&#xff1b;所以试用了下phpunit&#xff0c;快捷方便phpunit 的安装 phpunit是一个轻量级的php单元测试框架&#xff0c;通过pear安装安装过程 wget https://phar.phpunit.de/phpunit.phar chmod x phpunit.phar sudo mv …

1、RN跨平台开发——环境搭建

了解React NativeReact Native使你能够在Javascript和React的基础上获得完全一致的开发体验&#xff0c;构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次&#xff0c;编写任何平台。(Learn once, write anywhere)。Facebook已经在多项产…

Android之替换App桌面图标

1、需求 需要动态替换app在桌面的图标 2、解决办法 1)、在AndroidManifest.xml里面进行配置多个启动的alias别名 启动的activity <activityandroid:name=".ui.SplashActivity"android:launchMode="singleTop"android:screenOrientation="port…

【ArcGIS遇上Python】ArcGIS10.8 Python代码批量完美实现MODIS NDVI数据格式转换和投影变换

由于论文的需要,将MODIS NDVI数据进行投影变换和格式转换,具体操作可以参照:《ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换》,但是该文章中的做法只能一次性实现一景影像的转换,没法批量,虽然ArcGIS中提供了Batch的方法但是需要挨个添加数据,确定输出路径等等,…

引入 DTM 以支持 ABP 的多租户多数据库场景

这篇文章分享了使用 DTM 二阶段消息模式解决 issue #10036 的方法。今天我们要使用 EasyAbp 的 Abp.EventBus.Boxes.Dtm 模块。DTM 事件箱的介绍这个模块使用了 DTM 的 二阶段消息 使得 ABP 的事件箱得以支持 多租户多数据库场景。你需要先阅读 DTM 文档&#xff0c;它将帮助你…

【前端就业课 第一阶段】HTML5 零基础到实战(六)表格详解

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&#xff08;PC端Web打开&#xff09;加博主即可&#xff0c;目…

PHP中file_put_contents()函数的兼容性问题

PHP中file_put_contents()函数的兼容性问题 file_put_contents()函数就相当于依次使用fopen()&#xff0c;fwrite()和fclose()&#xff0c;真是个令人愉快的函数。我的第一个PHP小脚本中用到了这个函数&#xff0c;本地运行很正常&#xff0c;放到服务器上去之后点击submit按钮…

Android实战:手把手实现“捧腹网”APP(一)-----捧腹网网页分析、数据获取

“捧腹网”页面结构分析捧腹网M站地址: http://m.pengfu.com/捧腹网M站部分截图&#xff1a; 从截图中&#xff08;可以直接去网站看下&#xff09;&#xff0c;我们可以看出&#xff0c;该网站相对简单&#xff0c;一共分为四个模块&#xff1a;最新笑话、捧腹段子、趣图、神…

专题2-通过按键玩中断\第1课-中断处理流程深度剖析-lesson1

中断概念 1、中断生命周期 串口先产生一个事件&#xff0c;该事件传送到中断控制器里面&#xff0c;中断控制器会进行相应过滤&#xff0c;能通过过滤&#xff0c;那么就交给CPU去处理。 2、中断源 2440芯片手册 6410芯片手册 3、中断过滤 4、中断处理 cpu处理方式有两种&#…

Android之okdownload下载提示奔溃Expected URL scheme ‘http‘ or ‘https‘ but was ‘data‘

1 问题 客户现场奔溃在firebase上面提示错误信息如下 Fatal Exception: java.lang.IllegalArgumentException: Expected URL scheme http or https but was dataat okhttp3.t$a.a(HttpUrl.kt:38)at okhttp3.t$b.b(HttpUrl.kt:8)at okhttp3.y$a.b(Request.kt:5)at com.liulish…

mysql语法学习(一)__Instances__表

2019独角兽企业重金招聘Python工程师标准>>> ---建表 CREATE TABLE temp( id INT ); ----查询表 SELECT * FROM temp_t; ---删表 DROP TABLE temp; ---修改表名 ALTER TABLE temp_tt RENAME temp; ALTER TABLE temp RENAME TO temp_t; ALTER TABLE temp RENAME AS t…

【ArcGIS遇上Python】python批量获取栅格数据四至(top,bottom,left,right)坐标代码

上图所示为ArcGIS自带的影像数据,存放路径为C:\Program Files (x86)\ArcGIS\Desktop10.6\ArcGlobeData\wsiearth.tif",在源中可以查看该数据的四至坐标,那么,怎样用python批量获取多个栅格数据的四至坐标呢? 参考阅读:【ArcGIS风暴】ArcGIS求一个矢量图层中多个图斑…

使用 C# 读取 zip 压缩包解压文件的方法及注意事项

从 .NET Framework 4.5 版本开始&#xff0c;微软为 .NET 类库增加了一个名为 ZipFile 的类型。该类型在 System.IO.Compression 命名空间下&#xff0c;提供创建、解压缩和打开 zip 存档的静态方法。若要在 .NET Framework 应用中使用 ZipFile 类&#xff0c;必须添加对程序集…