响应式网页设计

2018-03-10 本文已影响0人 Lyra琹

名词解释

响应式Web设计(Responsive web design)：

-响应式web设计是基于HTML5和CSS3的RWD（Responsive Web Design）响应式web设计。
-响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。
-网页内容会随着视口（viewport）及设备（device）的不同而呈现不同的样式（style）。
-利用弹性网络布局（fluid grid）、弹性图片/媒体（flxible images）、媒体查询（media queries）等技术实现。

HTML5

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

CSS3

CSS3是CSS（层叠样式表）技术的升级版本。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

Web基本概念

-Web标准由结构标准、表现标准、行为标准构成
-结构标准用于对网页元素进行整理和分类，主要包括两个部分：XML和HTML
-标准表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
-行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript

网页

-网页就是网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。
-Internet网络：就是互联网，由一些使用公共语言互相通信的计算机连接而成的网络
-WWW：WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务
-URL：URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。
-DNS：DNS （英文Domain Name System的缩写）是域名解析系统。
-HTTP：HTTP (英文Hypertext transfer protocol的缩写) 中文译为“超文本传输协议”，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
-W3C：W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。

HTML三要素

<标签属性=“值”>
Elements/tags 元素标签
Properties 属性：标签可以拥有属性
Values 值：属性总是以名称/值对的形式出现

CSS三要素

选择器 {属性：值}
Selectors 选择器
Statements 声明
Properties 属性：希望设置的样式属性（style attribute）。每个属性有一个值。
Values 值

为什么需要“响应式网页设计”

通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整，页面液态图片技术布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。（来自百度知道）
2010年（响应式网页设计被提出）与2012年（响应式网页设计流行）所有平台的对比图