响应式设计

响应式设计是Ethan Marcotte在2010年5月提出的概念，这里的相应值得是网页能够在不同尺寸和类型的设备上作出不同的表现。
一个经过精心设计的响应式页面，可以在多种设备上提供舒适美观、易于交互的界面和良好的用户体验，达到“Once write run everywhere”的效果。这个概念是为了服务移动互联网而诞生的。

最初，响应式设计的概念是用于CSS3中的，通过媒体查询（Media Query）判断设备类型，进而对不同的设备设置相应的样式表。

而在实际开发中，很多开发者也会使用JS对设备类型进行补充判断，
比如使用JS可以精准判断设备是安卓还是苹果iOS系统，这是CSS3媒体查询无法做到的。
又因为可以通过JS获取文档元素并对其设置样式，所以使用JS来控制设备的视图表现也属于响应式设计。

媒体查询

媒体查询中最核心的内容就是media。
media是一个关键字，我们通过它来判断不同的设备类型，并在其代码块中预定义DOM元素的样式。
当设备属性符合一个media判定时，元素将采用其代码块中的样式。

语法

@media media_type and|not|only (exp) {
  /* CSS代码*/
}

其中，

• media_type代表媒体类型，可选值如下

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，如幻灯片
screen	彩色设备屏幕
speech	演讲
tty	固定字间距的网络媒体，如电传打字机
tv	电视

• exp为条件表达式，可用值如下

媒体特性	可采用的值	可用类型	可否min/max	简介
width	<length>	视觉屏幕/触摸设备	yes	定义输出设备中页面可见区域宽度
height	<length>	视觉屏幕/触摸设备	yes	定义输出设备中页面可见区域高度
device-width	<length>	视觉屏幕/触摸设备	yes	定义输出设备中页面可见屏幕宽度
device-height	<length>	视觉屏幕/触摸设备	yes	定义输出设备中页面可见屏幕高度
orientation	portrait landscape	位图介质	no	portait代表横屏，landscape代表竖屏
aspect-ratio	<ratio>	位图介质	yes	定义浏览器长宽比
device-aspect-ratio	<ratio>	位图介质	yes	定义屏幕的长宽比
color	<integer>	视觉媒体	yes	定义输出设备彩色原件数目，如非彩色设备，值为0
color-index	<integer>	视觉媒体	yes	定义输出设备的彩色查询表中的条目数，如没有使用彩色查询表，则值为0
monochrome	<integer>	视觉媒体	yes	定义在一个单色框架缓冲区中每像素包含的彩色原件个数。如果不是单色设备，值为0
resolution	<resolution>	位图介质	yes	定义设备的分表率，如96dpi
scan	progressive/interlace	电视类型	no	定义电视类设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描
grid	<integer>	栅格设备	no	查询输出设备是否使用栅格或者点阵，1代表是，0代表否

• and、not、only为连接符号，含义如下

关键字	说明
only	限定某种设备
and	逻辑与，连接设备名或表达式
not	排除某种设备
,	表示设备列表

之后我们可以在引入样式表文件时或在样式表中直接使用媒体查询，示例代码如下：

<!-- 1. 引入位置 -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 415px), only screen and (max-device-width: 415px)" href="index.css"/>

<!-- 2. 样式表中 -->
<style>
  @media screen and (min-width: 415px) and (max-width: 1368px) {
    .header  {
      height: 80px;
    }
  }
</style>

常见的手机屏宽不会超过415px，屏幕超过1368px的设备一般是大屏计算机，多为台式机

JS布局

使用JS进行响应式设计可以看作一记偏招，除了JS对设备类型的判断更为精准之外，由于CSS缺乏成熟的计算体系（只凭calc是完全不够的），在布局需要复杂计算时，JS也是必不可少的。
下面看一个使用JS判断设备类型（判断设备使用iOS还是Android系统）的示例：

compoted: {
   isAndroid () {
    // navigator为浏览器内置对象
    // 此处通过navigator.userAgent获取用户的设备信息
    let u = navigator.userAgent
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
  },
  isIOS () {
    let u = navigator.userAgent
    // !!为两次!的判定，当内容不为（null、undefined、空串等）时，判定为真
    return !!u.match(/\(i[^;]+;(U;) ? CPU.+Mac OS X/)
  }
}

这段代码通过用户的设备信息中是否含有特定关键字来判断设备类型，这是一种极为常见的做法，不过媒体查询却无法做到这一点。
之后我们可以根据这两个计算属性使用动态类名、动态样式或直接使用JS等方式为DOM元素设置样式。