浅谈响应式布局和自适应布局的区别或理解

什么是响应式布局

响应式布局就是在不同屏幕不同分辨上实现不同的展示方式。响应式布局能使网站在手机和平板电脑上有更好的浏览体验，也就就是说一个网站能后兼容多个终端，而不是为了每一个终端做一个特定的版本。

响应式布局概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
响应式设计的步骤

1. 设置 Meta 标签
   大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签.
   meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
2. 通过媒介查询来设置样式 Media Queries,Media Queries 是响应式设计的核心。
   . 它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：@media screen and (max-width: 980px) {
   #head { … }
   #content { … }
   #footer { … }
   }

3. 设置多种试图宽度
   . 假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置
   . /** iPad /
   @media only screen and (min-width: 768px) and (max-width: 1024px) {}
   / iPhone **/
   @media only screen and (min-width: 320px) and (max-width: 767px) {}
   差不多是这个道理

什么是自适应布局

自适应布局就是能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，需要开发多套界面来适应不的终端。
响应式布局与自适应布局的区别是什么

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。