一、是什么响应式开发
不同设备电脑、平板、手机的屏幕大小是不一样的，如何在不同大小屏幕的设备上正常的显示网页？有两中方案：
服务器端实现响应式：服务器根据不同设备发来的请求，返回不一样的网页。这样的缺点很明显，就是针对不同设备都需要开发多个版本的网页，开发成本和时间高，而且不利于后期的维护。
客户端实现响应式：一个web界面可以在不同的设备上正常显示，网页根据不同的设备屏幕自适应的排版。这样开发起来比较方便，维护也相对简单。缺点就是一个设备需要加载所有的css文件，流量消耗大。
二、利用媒值体查询实现响应式的布局
css3定义了媒体查询@media，可以在css中获取得到设备的width和height。一般我们的页面适应是根据宽度来设置的。用法如下：
@media 设备类型 限制条件 { }
其中有如下的设备类型：
我们常用的是screen。其他的作为仅作为了解。
后面的限制条件中的值的设置主要用到以下几种：
height 定义输出设备中的页面可见区域高度
width 定义输出设备中的页面可见区域宽度
device-height 定义输出设备的屏幕可见高度
device-width 定义输出设备的屏幕可见宽度
resolution 定义设备的分辨率。如：96dpi, 300dpi，118dpcm
color 定义输出设备每一个彩色原件的个数，如果不是彩色设备，则值等于0。
具体的区别简单来讲是：width 指的是显示区域的宽度，比如浏览器的显示区域宽度，device-width 指的是设备整个渲染（显示）区域的宽度，比如设备的大小 。
如果想了解这里面的具体差异可以参考这两篇文章，了解设备分辨率、像素等概念：
http://justcode.ikeepstudying.com/2016/07/css3-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD-max-device-width-%E4%B8%8E-max-width-%E7%9A%84%E5%8C%BA%E5%88%AB/
https://www.qcloud.com/community/article/646185
一般来讲，如何你需要调整浏览器大小查看页面的变化，那开发过程中就使用 max-width，CSS媒体查询4级草案中废弃了一些特性，特别是device-height、device-width和device-aspect-ratio（参见：https://drafts.csswg.org/mediaqueries-4/#mf-deprecated）。虽然已经支持它们的浏览器还会继续支持，但不建议在新写的样式表中再使用它们。
接下来，我们举个例子说明一下：
@media screen and (min-width: 680px) { div { background-color: black ; } }
上述代码意思就是浏览器的宽度大于等于680px时，设置div的背景颜色为黑色。
同样，我们可以使用max-width来限制css代码的执行条件，也可以使用and链接多个限制：
@media screen and (max-width: 680px) { div { background-color: white ; } } @media screen and (min-width: 480px) and (max-width: 680px) { div { background-color: white ; } }
也可以在表达式中加入only关键字，作用让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。
@media only screen and ( color ) { div { background-color: black ; } }
在css3中媒体查询支持堆外部样式表的引用，使用如下：
在css中引入
@import url(temp.css) screen and (min-width:1000px) ;
或者
在html中引入
<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="temp.css">
从浏览器的角度看，CSS属于“阻塞渲染”的资源。换句话说，浏览器需要下载并解析链接的CSS文件，然后再渲染页面。
不过，现代浏览器都很聪明，知道哪些样式表（在头部通过媒体查询链接的样式表）必须立即分析，而哪些样式可以等到页面初始渲染结束后再处理。
在这些浏览器看来，不符合媒体查询指定条件（比如屏幕比媒体查询指定的小）的CSS文件可以延缓执行（deferred），到页面初始加载后再处理。
所以，这样的好处是可以根据不同的设备宽度来优先加载不同的css文件，便让用户感觉页面加载速度更快。
但是，需要强调的是所有链接的文件都会被下载下来，只是如果有的文件不必立即应用，那浏览器就不会让它影响页面的渲染。
三、特殊处理
在开发中我们可能出现这样的情况，明明已经写好了针对小屏幕的网页样式，但是在手机浏览器中页面显示不是按照小屏幕的网页样式显示，而是跟PC端一样。这时因为有的浏览器是将浏览器宽度伪装成了电脑端的宽度，一般是980px，这样css显示的时候是按照浏览器宽度是980px来显示的，而不是按照设备实际的屏幕大小。这个比较明显的就是苹果的浏览器Safari。
关于这个具体问题的解释参见：
https://www.qcloud.com/community/article/646185 中讲解视口部分。
要解决这个问题，只需要在html的<head></head>加入：
<meta name="viewport" content="width=device-width"; initial-scale="1.0">这样的话就成功设置了浏览器的宽度是为设备宽度，而不是自己定义的宽度。initial-scale是初始的放缩比
还可以在该标签中设置如下参数：
minimum-scale:允许用户放缩到的最小比例
maximum-scale:允许用户放缩到的最大比例
user-scalable:用户是否可以手动放缩。
老式浏览器（IE6、7、8）不支持媒体查询，所以需要手动加入加入媒体查询的js文件：
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></s
四、响应式文字显示问题
字体的单位有px、em、百分比、rem、
px实际上就是像素，用PX设置字体大小时，比较稳定和精确。所有浏览器和设备中的字体保持相同大小。但是这种特性与我们需要的响应式相违背。
em是相对值，是根据基准来缩放字体的大小，而非具体值。em是根据父元素的属性值计算的。比如我们设置一个div的font-size为16px，那么在它的子元素中1em指的是16px，2em是32px，0,。5em是8px。em控制不太精确，而且对于元素字体的设置，总需要确定父元素的字体大小。
百分比:把 font-size 设置为基于父元素的一个百分比值。与em类似。
rem也是一个相对值，不同于em的是rem是的基准元素不是父类元素，而是根元素<html>。这样我们只需要在根元素设置一个参考值就可以了。
兼容性:所有浏览器都支持px, IE6到8不支持em和rem。
在iPhone上使用-webkit-text-size-adjust:none来禁用文本大小调整。
html { -webkit-text-size-adjust: none; }
五、响应式图片、视频显示问题
一种是根据不同大小的屏幕，加载不同分辨率的图片，这样效果好些。
还有一种可以写上如下代码：
img { max-width: 100%;} /*老版本的IE不支持max-width，所以只好写成：*/ img { width: 100%; }
或者：
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
对于视频：
.video embed, .video object, .video iframe { width: 100%; height: auto; }对于大多数嵌入视频的网站以下代码也有用：
img, object { max-width: 100%;}
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
