来自 前端知识 2019-11-28 13:24 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

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

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

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

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

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

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

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

响应式网页设计

图片 1

响应式网页设计(图片来源于网络)

  • Ethan Marcotee 在2010年发明的。
    大家可前往他的文章阅读更多内容。
  • 英文:Responsive Web design(简称RWD)

响应式网站设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式网页设计(Responsive Web Design,通常缩写为 RWD),又称为自适应网页设计、回应式网页设计。是一种现代网页设计方法,该设计基于 CSS3 的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局,同时减少缩放、平移和滚动。

  • 必要性
    响应式网页设计就是为了让网站能够兼容多个终端。为各个终端制作终极版本。
    为什么响应式设计如此必要呢?从statcounter的数据我们可以得到答案:

    图片 2

由数据可看出手机终端的持有率已经在电脑终端之上,且呈上升状态。
  • 案例
    我们也看看哪些网站应用了响应式

    图片 3

    百度电脑终端

![](https://upload-images.jianshu.io/upload_images/9509530-81ddaf4a06c497a6.png)

百度手机终端


[百度](https://link.jianshu.com?t=www.baidu.com)出应用了响应式的百度电脑与手机呈现的内容截然不同。

那么没应用RWD的网站又有哪些呢?

图片 4

中山大学电脑终端

图片 5

中山大学手机终端

中山大学的官网没有应用响应式设计。
可以看出没有应用RWD的中山大学官网在手机就显得非常不方便。


1996年12月—CSS 1

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

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

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

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

图片 6

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

图片 7

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

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

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

RWD的三项组成科技

  • 流式网格:概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点;

  • 灵活的图片:也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面;

  • 媒体查询:允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。

1998年5月—CSS 2

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

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

图片 8

RWD和前後端的关系

  • 前端

    图片 9

    前端(图片来源于网络)

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

HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。

  • HTML

指的是超文本标记语言 (Hyper Text Markup Language),这个也是我们网页最常用普通的语言了,经历了多个版本的发展,已经发展到5.0版了,得力于W3C建立的标准和规范,已普遍升级到了XHTML,XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language), XHTML 于2000年的1月26日成为 W3C 标准,是更严格更纯净的 HTML 代码,XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的,XHTML 是作为一种 XML 应用被重新定义的 HTML,是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。[1]

  • CSS

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。[2]

  • Javascript

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。 [3]


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的开始。

后端

后端就是网站的逻辑部分,主要涉及数据库,动态语言如PHP、ASP、JSP等
后台一般指的是管理员操作模块,包括对网站内容的更新、注册会员管理等等,是网站的一个子模块

后台应该是管理网站的,一般叫网站管理后台,比如发文章啊,查看浏览数据啊等等,对应的也会有网站前台,即访客能看到的页面,对了,后台肯定不能对访客开放的,没人愿意让访客来修改自己网站文章的。一般呢,你输入http://www.xxx.com看到的就是网站前台,有些网站呢,你输入http://www.xxx.com/admin/ 就能进入到那个网站的管理后台页面了,但是需要输入账户密码。
(知乎作者:蒙奇D撸码客)

图片 10

前端后端(图片来源于网络)

可以看出前端是呈现给用户的东西,后端是程序员开发的地方。响应式网页设计所要做的就是通过后端来使前端在各个终端上切换自如。(个人了解)

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:前端工程师应该了解的,响应式网页设计

关键词: