标签：
传统网站直接搬到移动端是无法直视的；
在移动端会创建一个虚拟布局窗口来完整的显示页面，参照http://screensiz.es/phone可以看出，手机上最宽能显示1080px宽的网页，虽然这样可以看到完整的页面，但是缩小的窗口里面的内容视觉美感降低，是无法体现用户体验的，甚至产品的价值也会大打折扣；这是很糟糕的！而响应式Web就这样应运而生了，他将能够解决您的网站跨多终端也能够完美展示的问题。
为了解决移动端屏幕分辨率的问题，各大浏览器专门定义并支持viewport虚拟窗口，他的作用就是允许开发者创建一个虚拟窗口，并且可以自定义其窗口大小或缩放比例，你只需要在网页的头部加入如下meta：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
这样就设置了移动页面的适应宽度为屏幕的宽度，比如iphone6上现在显示网页的宽就是375px,而不是原来的750px了；这只是第一步，你会发现这是远远不够的，要想原本在PC上美美的网页同样优雅的展示，还需要其他的工作，比如，页面模块的重新布局、图片的相应缩放等。那么这时你就需要用到一个重要的html5模块了：Media Query，他的作用就是让你的网站能够很好适配不同终端，并提供相应的样式；
语法：@media [only|not] media_type and media_feature
media_type 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视
media_feature 值 Min/Max 描述
color 整数 yes 每种色彩的字节数
color-index 整数 yes 色彩表中的色彩数
device-aspect-ratio 整数/整数 yes 宽高比例
device-height length yes 设备屏幕的输出高度
device-width length yes 设备屏幕的输出宽度
grid 整数 no 是否是基于格栅的设备
height length yes 渲染界面的高度
monochrome 整数 yes 单色帧缓冲器中每像素字节
resolution 分辨率(“dpi/dpcm”) yes 分辨率
scan Progressive interlaced no tv媒体类型的扫描方式
width length yes 渲染界面的宽度
orientation Portrait/landscape no 横屏或竖屏
用法很简单，一般，最多，常用的就这样：
1、@media screen and (max-width:450px){
/*一些样式*/
/*意思是界面宽度小于450px时的相应样式*/
body{
background:red;
}
}
2、@media screen and (orientation:landscape) {
/*判断手机横向时*/
}
3、<link rel="stylesheets" type="css/text" media="screen and (max-width:450px)" href="max450.css" />
其实用法就是这么简单，只是由PC过渡到移动端不仅是样式的改变，还可能涉及到整个页面的布局以及功能模块的改变，搞清状况后，query相应的视口，给相应的样式；最终达到一个页面能够适配多个终端，如果只是由PC到移动端，即使media query贵为HTML5，兼容性也是没有问题，IE9+及各大浏览器都很好的支持；如果要在PC端做响应式开发的话，因为贵为HTML5，只能hack到IE8+；如下：引入html5.js和respond.js
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
标签：
原文地址：http://www.cnblogs.com/hufeng/p/4946647.html
