伴随着移动设备的越来越流行，在现代社会中，可能人们手中握着移动设备的时间已经远远大于敲着键盘了，还有各种平板及未来会不断兴起的移动设备，如何让网页在这些设备上更好的显示，成为我们不断学习、思考的问题。
css的媒体查询创建的响应式网站，就是针对这一问题的。
其实在css2已经支持媒体，在新的css3中更加的具体，让我们能够更好的书写代码，以保证网页在不同设备上的布局的合理，使UI显示的更加的精致和优美。下面我们来举个栗子吧：
<link mete="not screen and (800px)"><!--在宽度不为800px-->
<style>
@media (max-479px){
/*在宽度小于479px,才生效*/
}
@media (min-480px) and (max-height:767px){
/*在宽度大于480px,小于767px的屏幕里，才生效*/
}
@media (min-800px) or (orientation:portrait){
/*至少宽度为800px或方向纵向*/
}
}
</style>
如果只是简单的电脑中缩放显示屏，那么上面的css3已经已经可以很好的满足了，可是我们现在还要考虑一个重要的问题，在手机端显示会不会出现问题。现实证明还是会出现问题，手机的浏览器会默认网页是为宽屏而设计的，它会缩小整个页面来适应屏幕的。我们就需要用到html5的新增的viewport即“窗口”，设置这张网页显示的相关设置。
举个栗子：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
width=device-width：浏览器将页面宽度假设为设备宽度，后面也可以跟数字单位px
height：高度的设置
initial-scale：浏览器初始化页面缩放比例
maximum：允许用户缩放到的最大比例
minmum：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放