使用一项叫媒体查询的CSS 功能，很容易检测出用户设备的屏幕大小。然后，据以提供替代或额外的CSS，可针对相应屏幕实现更加优化的体验。使用这种方式创建对设备有感知力的网站，被称为响应式设计。
响应式设计的要素
响应式设计包含三个重要的方面。
- 媒体查询：是一种CSS 语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS 规则；
- 流式布局：是使用em 或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放；
- 弹性图片：是使用相对单位确保图片再大也不会超过其容器。
媒体查询
媒体查询是CSS 代码的容器，其中的CSS 只在某些条件（比如，当前页面要被打印或者要显示在某种类型或尺寸的屏幕上）具备时才会应用。媒体查询可以用两种方式来写：@media 规则和标签的media 属性。
@media规则
第一种方式是@media 规则，可以在样式表或