响应式网页设计
2018-03-12 本文已影响0人
Winter_0308
名词解释
- 响应式WEB设计
- 英语：Responsive web design，通常缩写为RWD。
- 是一种网页设计的技术做法，该设计可使网站在不同的装置（从桌面电脑显示器到移动电话或其他行动产品装置）上浏览时对应不同分辨率皆有适合的呈现，减少使用者进行缩放、平移和卷动等操作行为。
- 参考资料：wiki-回應式網頁設計
- CSS3
- 层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3正是CSS技术的升级版本，现在已被大部分现代浏览器支持。
- 参考资料：wiki-层叠样式表
- HTML5
- 超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。HTML5是HTML最新的修订版本，进行了一定的删改和追加。
- 参考资料：wiki-HTML5
响应式WEB设计的必要性
-
来自statcounter的数据表明，现今使用不同分辨率屏幕的人群正在不断增加。下图为statcounter2017年2月至2018年2月的全球屏幕分辨率统计图表。
可以看出，使用小屏幕的人比重更大
-
小屏幕使用数量遥遥领先，而且不断增加
-
作为一种能够自动适应不同屏幕尺寸的网页设计技术，RWD能够为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。
实例
RWD的组成
- media query（媒介查询）;
- 流动网格；
- 灵活缩放的图片
- 基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。
- 参考资料：On being “responsive.” — Ethan Marcotte
RWD与前后端
- 前端：前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。
- 后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
- 响应式设计是从“桌面”、固定宽度设计开始的。
