对于响应式页面，我们并不陌生了，团谱官网和IUCD还有星科的微课程和考试系统等都是采用的响应式设计。今天就来总结一下响应式设计的核心——CSS技术Media(媒体查询器)的用法。

1.首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）  

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

2.因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

3.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。

平时用到的尺寸分别为：手机是

平板尺寸分别是

浏览器尺寸分别是

此尺寸不但响应式页面可以用，平时做网页也时常用到。

另，之前做的网站都是使用bootstrap框架，采用框架的栅格系统，此框架用起来比较省时省力，但有些地方还需要手写媒体查询来完善。

注：移动设备显示尺寸大全。

友善工作室   供稿