响应式网页设计

1.名词解释

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

CSS3

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂。

JavaScript

1.是一种解释性脚本语言(代码不进行预编译)。

2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

RWD

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

响应式架构 responsive architecture

超文本标记语言 HTML

响应式网站设计 Responsive Web design

响应式布局媒介查询 CSS media query

2.statcounter数据图表分析为何需要响应式web设计

根据市场调查机构 statcounter 的数据显示不同的屏幕有屏幕分辨率,这就说明了我们需要响应式网页设计来适应不同的屏幕分辨率,页面应该要有能力去自动响应用户的设备环境,就是网页内容应该随着访问它的视口及设备的不同而呈现不同的样式。

3.有无使用响应式web设计的例子

前不久优酷改版,而此次改版则使用了响应式设计方法,我们可以看以下几个页面:

网页上的显示https://www.youku.com/

手机客户端上的显示


以下是没有使用响应式网页设计的实例

bilibili网页版https://www.bilibili.com/


手机网页版上的bilibili


3.RWD的三项关键

Ethan Marcotte在2010年发明了响应式Web设计,他在A List Apart上提到运用了三项已有技术:弹性网络布局、弹性图片/媒体、媒体查询。(http://www.alistapart.com/articles/responsive-web-design/)”。——摘抄自《响应式web设计基础》

4.RWD和前後端的关系

需要依赖后端方案的RWD:

网页版、手机版、等等分开服务、设计、产出页面

不需要依赖后端方案的RWD:

网页版、手机版、等等一起服务、设计、产出页面

基于HTML5和CSS3就可以制作不需要后端方案的RWD

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 4,198评论 0 3
  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 4,633评论 0 0
  • 名词解释 Internet:就是通常所说的互联网,是由一些使用公用语言相互通信的计算机连接而成的网络 WWW(Wo...
    你猜_42e0阅读 3,764评论 0 0
  • 名词解释 响应式Web设计(Responsive Web Design) 所谓响应式Web设计,就是网页内容会随着...
    Autistic_8d3b阅读 4,709评论 0 0
  • 名词解释: Web标准:WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structu...
    wo_jzf阅读 5,224评论 0 1

友情链接更多精彩内容