什么是响应式？
页面的响应式设计与开发就是根据用户行为及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。
视口（viewport）
(1).视口概述
视口 (viewport) 代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。我们该如何理解这一个视口的概念呢？我们可以把视口看成是在不同的设备上浏览我们编写的页面效果的时候我们能够看见的那一个界面区域。
(2).视口相关代码以及参数说明
视口代码:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
参数详解以及注意事项
注意事项：
我们在编写视口的时候可以使用关键字:meta_viewport实现视口的代码快捷生成。
视口的相关代码需要写在标签<meta></mate>之间。
参数详解
width:设置layout viewreport的宽度为一个正数或者是字符串"device-width"。
initial-scale:设置用户的初始缩放值为一个数字。
minimum-scale:设置用户的最小缩放值为一个数字。
maximum-scale:设置用户的最大缩放值为一个数字。
user-scalable:是否允许用户进行缩放，值为"no"或"yes",分别表示允许和不允许。
媒体查询（@media）
(1).媒体查询概述
媒体查询是一个专门用于适应不同设备的一个利器，通过设置不同的媒介类型和条件定义样式的规则，媒体查询可以使得css准确的控制在不同的设备上内容的显示和不同的样式的显示，使得更加方便的使得开发者写出兼容不同设备的代码。
(2).媒体查询相关的语法
媒体查询的基本语法规则
@media 设备名称 only (选取条件) not (选取条件) and (设备选取条件){
//css相关样式规则
}
参数说明:
设备名称可选参数如下(节选重点):
all：所有设备
handheld: 手持设备
print: 文档打印或打印预览
screen：彩色电脑屏幕
tv: 电视
braille: 盲文
------------>这里我们统一指定参数为:all即可
按照上述的媒体查询的代码，其实我们不仅仅需要记住媒体查询的相关语法，还应该记住不同设备的宽度大小，这样方便我们进行设置，那么我们把它总结如下:
常用是三种设备的媒体查询代码:
@media all and (max-width:320px),all and (max-width:480px){
//手机端的横竖屏
}
@media all and (max-width:768px),all and (max-width:1024px){
//ipad端的横竖屏
}
注意事项:
1.我们在定义媒体查询的时候只需要定义手机端和ipad端，因为电脑端的我们在开发是时候就是以及写好的。
2.在使用媒体查询的时候需要注意一点就是关键字and ()之间是有一个空格的。
3.在检查所有写的代码准确的情况下，如果还是没有效果，建议可以重启以下浏览器，可能是浏览器的问题导致媒
体查询的效果没有实现出来。
Em & Rem
em 和 rem 是css中的单位，我们常见的单位还有 px 。那么他们之间有什么区别呢？
px：像素（Pixel）。像素px是相对于显示器屏幕分辨率而言的。
em：相对于当前元素的父元素的大小而言，例如：
<div style="font-size: 16px;"> <p></p> </div>
我们给div设置的字体大小为16px，那么我们在p标签内的1em就是16px，2em就是32px，以此类推。
rem：是相对于html根元素的大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
vw & vh
vw 和 vh 就是viewport width 和 viewport height ，是相对于浏览器视口的单位，基于浏览器的body部分，其换算如下：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
这里要把视口单位和百分比单位区分一下，视口单位是视口的百分比尺寸，而百分比单位是当前节点的祖先元素大小的百分比尺寸。
