学习笔记：IDF 移动端UX设计 1.5 响应式设计——让设备工作

1.5：Responsive Design-Let the Device Do the Work

响应式设计——让设备工作

What is Responsive Design?

什么是响应式设计？

响应式设计定义：依据展示网站的设备特性来设计页面的方式。一般使用 “移动端优先” 法则：优先确定移动端上的用户体验，随后将其扩展到平板以及屏幕更大的设备上。
普及的原因：现如今移动端上网的规模大于电脑上网的规模；移动端设备具有与PC不同的能力，如触摸屏、GPS数据与各类传感器。

The Three Major Principles of Responsive Design

响应式设计三大原则

• 流体网格系统（Fluid Grid Systems）
• 流体图像使用（Fluid Image Use）
• 媒体查询（Media Queries）

流体网格系统

相对大小：在响应式设计中衡量尺寸使用的是相对大小而不是绝对大小（以像素为单位）。相对大小的计算公式为：目标大小/环境=相对大小
举个例子：在1280像素宽的浏览器上展示960像素宽的封装器（wapper），则目标大小为960像素，环境为1280像素，相对大小为960/1280=75%
封装器内子元素的相对大小计算也遵循该公式。假设页面上展示两个等宽的列，中间有20像素的留白，则每列有470像素宽。每列的相对宽度为470/960=48.9%，中间留白的相对宽度为20/960=2.2%。可以在CSS脚本中使用这些值。
（奇了怪了，原文还是没有解释什么是流体网格系统）

流体图像

流体图像定义：被拉伸以适应外部容器大小的图像。处理流体图像最简单的方法是使用CSS命令

img{max-width: 100%;}

该命令定义图像的最大宽度=父元素宽度*100%，这样图像不会在窗口拉伸过大时跟着被拉伸而模糊，同时在窗口缩小时跟着等比缩小。
因为对于特定屏幕，比如手机、平板和笔记本电脑，像素密度会有很大不同，因此可以通过max-width设置为大于容器大小的尺寸结合SVG图像实现。
对于更复杂的情况（如使用多个图像），响应式图像组织RICG（Responsive Images Community Group）提出以下方法：使用img元素的scrset和sizes属性使得浏览器在不同大小下加载不同的图片以达到最佳的显示效果。
以下代码来自img元素srcset属性浅析，表示浏览器宽度达到800px则加载middle.jpg，达到1400px则加载big.jpg。注意：像素密度描述只对固定宽度图片有效。

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

媒体查询

媒体查询：该方法允许使用对媒体的查询去指定什么时候对页面元素进行重新排版（原文是use a media query to specify when the screen real estate should be rearranged，不是很能理解）。
该方法对于“移动端优先”十分有效（回忆一下什么是“移动端优先”），CSS代码如下：

@media screen and (min-width: 480px) { /* ..larger screen sizes here.. */ }

使用框架

使用现有的响应式框架，如Bootstrap以防止重复造轮子。