1.响应式页面
当下手机、pad、电脑等不同屏幕尺寸设备盛行，为了适应各式终端能正常显示页面，设计师往往设计出几套前端页面，以在不同分辨率的设备下正常显示。但这对于小型或缺乏UI的公司来说，难度无疑是大的，且预算上可能会划不来。因此大多数时候，开发者会使用一些技术或外部的框架（bootstrap）让页面自适应不同的分辨率。这便是响应式网页，根据浏览设备的不同，而自动更改布局、图片、文字效果，不会影响用户使用。
手写响应式页面时应做到以下几点：
（1）必须声明viewport（视口）元标签，格式如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，禁止浏览器初始时缩放显示。
（2）容器的宽度或文字大小尽量不使用固定值（如**px），使用相对值（**em）
（3）图片要指定大小，如:
img {
/*width:400px; 不随容器缩放*/
/*width:100%; 随容器无限缩放*/
max-width: /*可随容器缩放，但不会超过图片的原始大小*/
}（4）使用流式布局，如浮动、inline-block，不能固定布局
2.CSS3 Media Query技术
CSS3 Media Query是实现响应式页面必须使用的技术，Media指不同的浏览网页的设备；Query指获取当前浏览器设备的物理特性（色彩、width、height等）。CSS3媒体查询技术实际上是指根据不同浏览设备，适配执行不同的CSS代码的技术。
下面是CSS3媒体查询技术的两种不同的用法：
（1）根据媒体查询结果，执行不同的外部文件
在html页面中加入连接的css文件，其中link标签要有media属性，以判定浏览设备的状态。
<link media=“screen and （屏幕尺寸判断条件1） | and （屏幕尺寸判断条件2） ” rel="stylesheet" href="执行的css文件">，例如：
<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="pad.css">（2）媒体查询的代码嵌入css中，根据查询结果执行css代码
直接在css中添加媒体查询代码，media前加@标记。
@meida screen and (屏幕尺寸判断条件1) | and (屏幕尺寸判断条件2) {
选择器 { 属性名：值 }
......
}， 例如：
<style>
@media screen and (max-width:991px) and (min-width:768px) {
float:left;
}
</style>其中，屏幕尺寸判断条件有两种形式（是否有其他？）：mix-width：？？；max-width：？？。
（3）常见设备的屏幕尺寸范围
phone: 小于768px（包含）；
pad： 在786px~991px（包含）之间；
pc：大于991px