本课要点：

一、“响应式Web设计”的理念

“页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸和屏幕定向等）进行相应的响应和调整”。

二、网页可视区域viewport

viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

移动设备上的viewport：

1、 layout viewport（布局视口）(默认）

       一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px；iOS, Android基本都将这个视口分辨率设置为 980px，这称为 layout viewport。但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

 layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

 2、visual viewport（视觉视口）

  浏览器可视区域的大小叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取.

 3、ideal viewport（理想视口），就是我们说的屏幕分辨率

   完美适配移动设备的viewport的好处:   

   1） 首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；

   2） 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。

     ideal viewport 并没有一个固定的尺寸，不同的设备拥有不同的 ideal viewport。 

三、利用meta标签对viewport进行控制

<meta name="viewport" content="initial-scale=1">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。

四、响应式页面开发

@media 规则针对不同媒体类型可以定制不同的样式规则

1．media query的语法

 2．如何使用media query 

（1）在<link>中使用@media

（2）在样式表中嵌入@media

代码如下：