通过@media实现Media Query实现响应布局

响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果。通过CSS3 Media Query实现响应布局。
利用@media screen实现网页布局的自适应。优点：无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。

Media Query能在不同的条件下使用不同的样式，使页面在不同的终端设备设备下达到不同的渲染效果。使用Media Query时必须要使用@media开头，然后指定媒体类型和媒体特性。媒体特性的书写方式和样式的书写方式基本相同，主要分为两个部分，一个是媒体特性，一个是媒体特性的值。如：{max-width:800px}

这样我们就可以通过指定最大宽度：max-width、最小宽度：min-width、多个媒体特性一起使用、指定设备屏幕宽度。实现PC端和移动端不同的不同分辨率下不同的显示效果。

在bootstrap中，@media使用地比较多。

原文链接http://www.daimatree.com/dll_website/dll_showHTML.php?html_url=CSS_media_query