响应式布局简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源那么响应式布局的优点和缺点又有哪些呢优点1面对不同分辨率设备灵活性强 2能够快捷解决多设备显示适应问题 缺点不能完全兼容所有浏览器，代码累赘，加载时间加长说了这么多，可能还有。

响应式Web设计的方法 介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍通过媒体查询的设置，我们可以根据屏幕宽度屏幕。

什么是H5响应式布局？代码什么的，不方便理解简单说来，几年前，我们为实现移动端和PC端网页相同的呈现效果，需要开发两个单独的网站响应式布局的出现，能帮我们实现“一次设计，普遍适用”的效果，网页根据终端自动调整页面和图片布局H5响应式布局就是在不同终端呈现相同的动态页面，为用户提供更舒适。

响应式布局，说直白点就是一个网站能够兼容多个终端，可以按不同的分辨率显示不同的状态而实现这个就要用到css3的Media Queries媒介查询这个功能非常的强大，但是有优点的同时，缺点也是会存在的那就是兼容各种设备工作量大，效率低下，加载时间长等但是学起来很容易，看完下面的代码你就会了。

实现原理代码thead floatleft tbody displayblockwidthautooverfloauto二响应式内容1响应式图片带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的那么我们就得把图片。

#160#160#160同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果只是混合像素和百分比两种单位作为页面单位可切换的固定布局弹性布局混合布局都是目前可被采用的响应式布局方式其中可切换的固定布局的实现成本最低，但拓展性比较差。

移动端实现 web 页面的响应式，可以使用 CSS3 中的媒体查询Media Queries媒体查询可以根据不同的设备屏幕尺寸，应用不同的样式规则，从而实现响应式布局例如，可以使用 maxwidthminwidthmaxheightminheight 等属性来设置元素的最大最小宽度或高度，以适应不同设备的屏幕尺寸另外。