响应式网页设计

什么是响应式Web设计

  • 响应式Web设计

英文:Responsive Web Design(RWD)

就是网页的内容会随着访问它的视口,及设备的不同而呈现不同的样式。
这个名字是Ethan Marcotte在2010年发明的,当时他在A List Apart上写了一篇文章
A List Apart
文章中综合运用了三种已有技术(弹性网格布局,弹性图片/媒体,媒体查询)实现了一个解决方案,就叫“响应式web设计”。

由来

因移动设备的大量增长以及大屏幕显示器的流行,上网的设备屏幕之间的差距也达到了前所未有之大。

截止2018年2月,调查机构(gs.statcounter.com)的数据显示,各种各样的显示屏在浏览网页,一个内容要在5种以上的不同尺寸的显示屏上显示。
gs.statcounter.com

Feb 2017-Feb 2018

面对不断扩展的浏览器和设备诞生了基于HTML5CSS3的响应式web设计,用于网页设计的视觉呈现。
前端作用于采集输入信息,后端进行处理。计算机程序的界面样式,视觉呈现属于前端。

  • RWD 使用与否对比

  1. 使用 RWD

淘宝

  1. 未使用 RWD

广东就业专项补助
这年头可能也就政府网站没匹配RWD了

  • HTML5

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。目标是取代1999年所制定的HTML4.01和XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求。广义论及HTML5时,实际指的是包括 HTMLCSSJavaScript 在内的一套技术组合。

  • CSS3

    层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表级联样式表串接样式表层叠样式表阶层式样式表,一种用来为结构化文档(如HTML文档或XML添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。目前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。

  • JavaScript

    JavaScript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的解释型语言。它已经由ECMA(欧洲电脑制造商协会)通过实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。

引用

https://zh.wikipedia.org/wiki/HTML5
https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8#CSS3
https://zh.wikipedia.org/wiki/JavaScript
http://gs.statcounter.com/screen-resolution-stats
《响应式web设计》[英] Ben Frain 著 奇舞团 译

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 名词解释(来源于网络) HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五...
    N莫熙彤阅读 4,440评论 0 1
  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 4,601评论 0 0
  • 【英】Ben Frain所著响应式web设计HTML5和CSS3实战(第二版)对本文有参考 相关名词解释 响应式网...
    肖航航阅读 2,895评论 0 3
  • 响应式Web设计:网页内容随着访问的不同视口及设备调整呈现 1.基于HTML5和CSS3的RWD(Responsi...
    Eugenie_阅读 3,584评论 0 0
  • 名词解释 响应式web设计:基于HTML5和css3的RWD响应式web设计,页面内容会随着视口及设备的不同而呈现...
    N黄舒婷阅读 3,365评论 0 0