响应式 Web 设计原则

响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。核心要素是：媒介查询（Media Query）。

当设备宽度小于或等于 100px 时返回内容：

@media (max-width: 100px) { /* CSS Rules */ }

当设备高度大于或等于 350px 时返回内容：

@media (min-height: 350px) { /* CSS Rules */ }

使图片根据设备尺寸自如响应

不要使用绝对单位
img { width: 720px; }

img {
  max-width: 100%;
  display: block;
  height: auto;
}

使排版根据设备尺寸自如响应

视窗单位来做响应式排版，都是相对单位。百分比是相对于父级元素的大小。
四个不同的视窗单位分别是：

vw：如 10vw的意思是视窗宽度的 10%。
vh：如 3vh的意思是视窗高度的 3%。
vmin：如 70vmin的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
vmax：如 100vmax的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。