澳门在线威尼斯官方 > 威尼斯澳门在线 > 响应式网页设计,前端工程师应该了解的

原标题:响应式网页设计,前端工程师应该了解的

浏览次数:106 时间:2019-12-30

1996年12月—CSS 1

互联网上对CSS正式的介绍要追溯到1996年,万维网联盟 (W3C) 面向全世界发布CSS的时候。CSS并不是当时唯一一种正在开发中的样式语言,但是层叠这个绝对要素和开发序列将它与其他的语言区别开来。

“HTML 是一种具有语义并用来传达网页内容的语言,CSS 最初的设计目的,就是为了使 HTML 的这一理念能够保持下去。”一位Google的规范黑客(spec hacker)Tab Atkins Jr.在网络播客平台说,“尤其是让机器能够理解。”

样式表并不是全新的,自从标准通用标记语言(SGML)的开发以来,它(样式表)就因为一些能力而被使用。但在当时,将它应用于网页还是很新奇的。

CSS最初并没有什么闪光点,但是它的影响力是突然的。为了正确地来看待它,下图是第一个发布在网络上的网页看起来的样子:

图片 1

下面是一个类似的使用了CSS的基础网页的例子:

图片 2

正如你所看到的那样,CSS的加入使得网页元素能够采用独特的特征。其主要的益处是设计师和开发人员现在可以不用通过更改HTML就能改变CSS的一些属性了。例如,蓝色的高亮区域可以换成绿色或红色。

但是在当时它大体上也就是这样了。W3C发布的CSS推荐标准拥有以下初始属性:

  • 前景和背景颜色/图片
  • 字体属性例如字体和加粗
  • 文本,包括单词和字母间距
  • 外边距,边框,内边距
  • 分类和对齐

②再者,我们就可以不必为不断到来的新设备做专门的版本设计和开发了,基于HTML5和CSS3的RWD不需要依赖后端方案。


2011年6月—CSS 2.1

然而,W3C不再维护CSS 2的推荐标准了。作为替代,CSS2.1在2004年推出并于2011年6月成为了W3C推荐标准。这个建立在CSS 2之上的修订版解决了CSS 2的很多bug并代替了之前的版本。

CSS 2.1提升了复杂度。它准许了父子关系的概念,让设计师和开发人员可以在一个给定元素上定义多个类名。它还推出了可能成为响应式设计的第一次尝试:字体大小调整(font-size-adjust)属性。

演示文稿现在可以针对特定的媒体设备,包括手持设备,盲文设备,可视化浏览器,打印机和听觉设备。这是演变成为CSS 3的开始。

HTML(Hyper Text Markup Language)

HTML即超文本标记语言;主要是通过HTML标记对页面中的文本、图片和声音等内容进行描述。

关于作者:刘唱

图片 3

数据挖掘研究生 个人主页 · 我的文章 · 37 ·   

图片 4

CSS(Cascading Style Sheets)

  • CSS通常称为CSS样式或样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高边框样式、边距等)以及版面的布局等外观显示样式。
  • 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS 3

我们现在最熟悉的版本,CSS 3开发自1999年。其最大的不同之处是引入了模块,每个模块都拥有自己的功能和扩展功能。其中有一些取代了从前CSS2.1的部分。

自2011年6月,W3C正式推荐了四个模块以及大量用于开发的不同阶段的性能。本质上,此次 (CSS 3) 将整个CSS语言分解成为模块并使其彼此相互独立。

正式推荐的模块包括:

  1. 2011年6月 —颜色
  2. 2011年9月  第三代选择器
  3. 2011年9月   命名空间
  4. 2012年5月    媒体查询

媒体查询大概是最具革命性的模块之一。它负责响应式设计,并且已经成为如今网络界的标准。以下是一个基于媒体查询的基本响应式设计的例子:

图片 5

CSS的未来:它将何去何从?

很多人想知道CSS接下来会如何。一些人甚至怀疑我们是否还需要CSS。

正如很多人所注意到的,W3C已经放弃了CSS的级别,使用这些条目只是为了与从前的版本区别开来。这在W3C社区已经为人熟知了一段时间了。

“从来就没有过CSS 4,以后也永远都不会有CSS 4,CSS 4是一个不存在的东西,” Tab Atkins Jr. 于2013年在他的博客中写道。他在Google工作,坐在CSS工作组,也贡献于W3C的其他几个工作组。

现今,这种语言被简单地称为CSS。这个社区也把精力集中在开发更复杂更有益的独立模块上,使这种语言更加成熟,能够适应现在设计师和不同设备的挑战和需求。在某种意义上,就像CSS准备从大学里毕业了一样,一个全新的世界正等待着它。

打赏支持我翻译更多好文章,谢谢!

打赏译者

举例子

  • 厦门宝海海洋文化发展有限公司官网(采用了响应式Web设计)
  • 腾讯视频(没有采用响应式Web设计)

1998年5月—CSS 2

参考CSS1中建立的属性,CSS 2的第一份工作草案在1997年11月发布,并且在1998年5月成为了W3C的推荐标准。

这个版本拓展了属性的能力,使其更加多样化。例如:有 :hover伪类和臭名昭著的文本阴影效果(现在已过时):

图片 6

前端(FRONT END)

前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。

前端工程师应该了解的 CSS 进化史

2016/07/20 · CSS · 2 评论 · 进化史

本文由 伯乐在线 - 刘唱 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:Sheena Lyonnais。欢迎加入翻译组。

CSS生日快乐!你毫无疑问地在你短暂的生命里产生了巨大的影响,永远地改变了网络的审美。

层叠样式表(CSS)就像一位神童,从一开始就展示出了巨大的潜力。当它还在“青春期”努力地寻找兼容性的时候,这种样式语言就已经克服了大部分的障碍并证明了自己足以成为Web技术的基石。

让我们回顾一下迄今为止CSS的一生。

XHTML(Extensible Hyper Text Markup Language)

  • XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language);
  • XHTML 的目标是实现HTML向XML的过渡;
  • XHTML 与 HTML 4.01 几乎是相同的;
  • XHTML 是更严格更纯净的 HTML 版本;
  • XHTML 是作为一种 XML 应用被重新定义的 HTML。

打赏支持我翻译更多好文章,谢谢!

图片 7

1 赞 2 收藏 2 评论

后端 (BACK END)

后端开发应是指后台程序设计,包括数据库设计、动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.

JavaScript

JavaScript是Web页面中的一种脚本语言,通过Javascript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中,JavaScript用于为页面添加动态效果。


响应式网页设计的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

视口(viewport)

  • 浏览器中用于呈现网页的区域
  • 视口是与设备相关的一个矩形区域,坐标单位是与设备相关的“像素”,大多数情况下,视口与客户区相同

①由于用户的设备环境正发生变化,如果没有响应式网页设计,当你在使用移动端打开某些没有响应式设计的网页时,你会感到不方便,那么用户体验就会比较差;页面应该需要有能力去响应用户的设备环境,实现了一个网站兼容多个终端,使用户的体验得到满足。

RWD和前后端的关系

  • 响应式不只是前端的责任(media query),也不是后端的责任(单独的m.站点),而是二者统一,后端来输出不同的内容,前端来按需加载图片,来做断点。
  • 前端:与传统的web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,所以最终的产出更有可能与设计稿出入较大,需要前端开发人员和设计师多沟通。

RWD

  • RWD指的是"Responsive Web Design "的英文首字母,即为响应式Web设计;
  • 它包含三项组成科技:弹性网格布局(fluid grid)、弹性图片/媒体(flexible images)、媒体查询(media queries)

弹性布局

很久以前,混沌初开之际(大约公元20世纪90年代末),网站的宽度大都以百分比形式定义。百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化,因而得名弹性布局。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:响应式网页设计,前端工程师应该了解的

关键词:

上一篇:自定义事件,js观察者模式学习总结

下一篇:CSS布局层叠,如何设置链接样式