3.3 响应式网站设计
响应式网站（Responsive Web Design，缩写为RWD）是指用户页面根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，自动切换分辨率、图片尺寸及相关脚本功能以适应不同设备。响应式网页设计就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。响应式网站设计包括响应式HTML、响应式布局、响应式图片、响应式CSS、响应式JS等。
进行响应式设计首先需要了解User Agent与media query。
（1）User Agent
User Agent即用户代理，简称UA，是一个特殊字符串头，使服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
（2）media query
在CSS中可以使用media query来判断不同的媒体类型引入的样式和脚本。如：
上面的media语句表示：当宽度小于或等于500px时，调用col-md-4.cs样式表渲染页面。其中：
（1）screen：媒体类型，包括screen（屏幕）、print（页面打印或打印预览模式）等10余种类型。
（2）and：关键词，与其相似的还有not，only等。
（3）max-width:600px：媒体特性（媒体条件），如最小宽度是min-width，除了宽度还可以判断颜色等。
3.3.1 服务端响应与客户端响应
对于用户行为和设备环境的响应判断有两种方式，客户端判断和服务端判断。客户端判断是指在浏览器端通过CSS中的media query进行判断或使用JS判断User Agent。服务端判断是指客户端提交User Agent到服务端，服务端判断User Agent请求信息后输出。
（1）PC端与移动端的HTML结构差距较大时，如PC显示出更多的字段，进行更加适用于鼠标操作的业务，此时适用于服务端判断，由服务端输出PC与移动两套页面。
（2）PC端与移动端的HTML结构差距不大的，可以输出一套页面，由前端自适应。HTML的结构差异可以结合响应式JS和CSS、响应式图片和响应式布局进行变化处理。但因为移动端处理能力有限，需要保证移动端资源最小化，有冲突的条件下要优先照顾移动端，而PC端可以适当冗余。
3.3.2 响应式JS
设置PC端和移动端两套JS。有两种判断并输出的方式，一是使用media query判断媒体类型适应设备，或使用JS判断User Agent；二是在服务端判断User Agent，直接输出。
3.3.3 响应式CSS
设置适应小、中、大等不同屏幕的样式。有两种判断并输出的方式，一是使用media query判断媒体类型适应设备。二是在服务端判断User Agent，直接输出。
3.3.4 响应式图片
根据不同屏幕大小和分辨率设置多套图片。有两种判断并输出的方式，一是使用media query判断媒体类型适应设备。二是在服务端判断User Agent，直接输出。
3.3.5 响应式布局
布局是响应式网站的核心。
（1）使用Grid布局
CSS的布局模式包括table布局、float浮动布局、flex-box布局、Grid布局等等。以flex-box布局和table比较，相当于把table中的单元格拿出来，作为一个箱子，flex-box可以对箱子的摆放进行规划，也可以把箱子看成Word软件中的一个汉字，flex-box的布局（display）就是Word中的汉字排版功能，所以布局方式更加灵活。
相比使用flex-box布局进行响应式设计，使用Grid布局可以更加精确。Grid布局相当于田字格本，布局过程就是在田字格上定义业务区域占用的单元格位置，如图3-7所示。
图3-7 Grid布局
例如在Bootstrap中，把网页分为12列，设置适应超小、小、中、大等不同屏幕的样式。如图3-8所示。
图3-8 Bootstrap的布局模式
Bootstrap的响应式网格布局见https://v4-alpha.getbootstrap.com/layout/grid/。使用media query判断设备大小变化，应用不同的样式，样式中的列宽和间距做出相应的改变，其中列宽使用百分数，而间距gutter使用px或rem。如果屏幕太小，则在样式中将宽度统一设置为100%。例如：
（2）使用REM布局
在CSS中px、em、rem都是计量单位，都能表示尺寸。px表示“绝对大小”，是CSS中定义的像素（与显示器像素有区别），利用px设置字体大小及元素宽高等比较稳定和精确，但其不能随浏览器缩放产生变化。em表示相对尺寸，相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。rem也表示相对尺寸，其参考对象为根元素<html>的font-size（默认是16px）。所有元素使用rem定义大小，根据media query查询屏幕大小并设置不同的根font-size，这样屏幕大小变化时，根font-size也会变化，布局比例就会根据rem进行缩放。
某些浏览器还支持使用Zoom按屏幕进行缩放，但zoom是全局的配置，而rem可以配置到html元素上，更加灵活。