本文目录一览：

• 1、静态、自适应、流式、响应式四种网页布局有什么区别？
• 2、什么是响应式是什么
• 3、响应式是什么意思？
• 4、响应式原理（一）
• 5、响应式 是什么

静态、自适应、流式、响应式四种网页布局有什么区别？

1、灵活性不同响应式：

静态布局响应式：毫无灵活性可言响应式，目前已逐渐被淘汰。

自适应布局响应式：静态布局的升级版响应式，因其强大的灵活性，已逐渐成为高端网页的代名词。

流式布局：灵活性更高，可适用于其他三种网站布局。

响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。

2、设计方法不同：

静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。 

自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

扩展资料：

静态、自适应、流式、响应式四种网页布局的特点概括

1、静态布局：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

2、流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

3、自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

4、响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

什么是响应式是什么

响应式布局响应式，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点响应式：

1、用户体验友好

响应式网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，一致性友好体验。

2、节省设计与开发时间

响应式网站界面只需要设计两套设计效果图，后期维护不需要分别维护pc界面、pad界面、移动界面，专心维护一个网站即可。

3、SEO友好

由于响应网站在不同终端有友好的界面展示效果，用户可以与网站一直保持联系，比如URL不变积累分享。

4、可以适应所有设备屏幕

拥有了响应式的网站设计则不同，用户可以一直和网站保持联系，而且它对用户非常用好。

扩展资料：

响应式布局的缺点

1、设计与风格有局限性

自由度太低，局限性较大。

2、对IE老板兼容性不友好

对于老版本IE（IE6、IE7、IE8）支持不好。

3、灵活性有所欠缺

基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计。

参考资料来源：百度百科—响应式布局

响应式是什么意思？

响应式网页设计是网页能够根据屏幕宽度自动适应，以达到适配各种屏幕，使网站在不同设备上都能得到完美的展现。通过响应式模板可以很方便的搭建响应式的网站，在管理和运营上方便的多。

响应式网站获得欢迎的原因就是其优点诸多，用户体验好，适应所有终端，可以浏览器里调整宽度查看;.维护成本低，只需一个后台统一管理;分享方便，内容链接地址一致;视觉统一;可以嵌套进APP中。

响应式原理（一）

        可能很多小伙伴之前都响应式了解过 Vue.js 实现响应式的核心是利用响应式了 ES5 的 Object.defineProperty 响应式，这也是为什么  Vue.js 不能兼容 IE8 及以下浏览器 的原因，我们先来对它有个直观的认识。

          Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，先来看一下它的语法： obj 是要在其上定义属性的对象； prop 是要定义或修改的属性的名称； descriptor 是将被定义或修改的属性描述符。

        比较核心的是 descriptor，它有很多可选键值，具体的可以去参阅它的 文档 。这里我们最关心的是 get 和 set ，get 是一个给属性提供的 getter 方法，当我们访问了该属性的时候会触发 getter 方法；set 是一个给属性提供的 setter 方法，当我们对该属性做修改的时候会触发 setter 方法。

        一旦对象拥有了 getter 和 setter，我们可以简单地把这个对象称为 响应式对象 。那么 Vue.js 把哪些对象变成了响应式对象了呢，接下来我们从源码层面分析。

        在 Vue 的初始化阶段，_init 方法执行的时候，会执行 initState(vm) 方法，它的定义在 src/core/instance/state.js 中。        

        initState 方法主要是对 props、methods、data、computed 和 wathcer 等属性做了初始化 操作。这里我们重点分析 props 和 data ，对于其它属性的初始化我们之后再详细分析。

        props 的初始化主要过程，就是 遍历定义的 props 配置 。遍历的过程主要做两件事情：一个是调用 defineReactive 方法 把每个 prop 对应的值变成响应式 ，可以通过 vm._props.xxx 访问到定义 props 中对应的属性( 代理 )。对于 defineReactive 方法，我们稍后会介绍；另一个是通过 proxy 把 vm._props.xxx 的访问代理到 vm.xxx 上，我们稍后也会介绍。

        data 的初始化主要过程也是做两件事，一个是对定义 data 函数返回对象的遍历 ，通过 proxy 把每一个值 vm._data.xxx 都 代理 到 vm.xxx 上；另一个是调用 observe 方法观测整个 data 的变化，把 data 也变成响应式，可以通过 vm._data.xxx 访问到定义 data 返回函数中对应的属性，observe 我们稍后会介绍。

        可以看到，无论是 props 或是 data 的初始化都是把它们变成响应式对象，这个过程我们接触到几个函数，接下来我们来详细分析它们。

        首先介绍一下代理，代理的作用是把 props 和 data 上的属性代理到 vm 实例上，这也就是为什么比如我们定义了如下 props，却可以通过 vm 实例访问到它。

        我们可以在 say 函数中通过 this.msg 访问到我们定义在 props 中的 msg，这个过程发生在 proxy 阶段：

        proxy 方法的实现很简单，通过 Object.defineProperty 把 target[sourceKey][key] 的读写变成了对 target[key] 的读写 。所以对于 props 而言，对 vm._props.xxx 的读写变成了 vm.xxx 的读写，而对于 vm._props.xxx 我们可以访问到定义在 props 中的属性，所以我们就可以通过 vm.xxx 访问到定义在 props 中的 xxx 属性了。同理，对于 data 而言，对 vm._data.xxxx 的读写变成了对 vm.xxxx 的读写，而对于 vm._data.xxxx 我们可以访问到定义在 data函数返回对象中的属性，所以我们就可以通过 vm.xxxx 访问到定义在 data 函数返回对象中的 xxxx 属性了。

        observe 的功能就是用来监测数据的变化，它的定义在 src/core/observer/index.js 中：

        observe 方法的作用就是给 非 VNode 的对象类型数据添加一个 Observer ，如果已经添加过则直接返回，否则在满足一定条件下去实例化一个 Observer 对象实例。接下来我们来看一下 Observer 的作用。

        Observer 的构造函数逻辑很简单，首先实 例化 Dep 对象 ，这块稍后会介绍，接着通过执行 def 函数 把自身实例添加到数据对象 value 的 __ob__ 属性上 ，def的定义在 src/core/util/lang.js 中：

        回到 Observer 的构造函数，接下来会对 value 做判断， 对于数组会调用 observeArray 方法，否则对纯对象调用 walk 方法 。可以看到 observeArray 是遍历数组再次调用 observe 方法，而 walk 方法是遍历对象的 key 调用 defineReactive 方法，那么我们来看一下这个方法是做什么的。

        defineReactive 的功能就是 定义一个响应式对象 ，给对象动态添加 getter 和 setter，它的定义在 src/core/observer/index.js 中：

        defineReactive 函数最开始初始化 Dep 对象的实例，接着拿到 obj 的属性描述符，然后 对子对象递归调用 observe 方法 ，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或修改 obj 中一个嵌套较深的属性，也能触发 getter 和 setter。最后利用 Object.defineProperty去给 obj 的属性 key 添加 getter 和 setter。而关于 getter 和 setter 的具体实现，我们会在之后介绍。

响应式 是什么

很久很久很久以前响应式，每个人都只有一件衣服（ Website ），不管你有钱没钱大家每天都只穿这一件。

后来有人发明了舞会（移动互联网），大家都争先恐后地想要参加，于是一个做「开发」响应式的裁缝忽悠人们说进舞会最好订做一件专门的礼服（ Mobile Site ），大家想想也对，上班和出去哈皮都穿同一件衣服多无聊啊，舞会就要有舞会的样子。于是乎只要有点闲钱的人都做了礼服，他和原来那件叫做 Website 的衣服是完全不一样的，面子不一样，里子也不一样。

后来舞会的种类越来越多了，很多人被迫做了好多好多件礼服，于是又有一个叫做「前端」的裁缝站出来说你们每年要新做那么多衣服，多费钱啊，而且一出门钥匙啊皮夹子啊名片都要在不同衣服里换来换去多麻烦。你看，我们新发明了一个手艺叫做「Responsive Design」，只要把你原来那件衣服稍微那么一改，以后去哪个舞会都可以只穿这一件衣服，衣服的里子永远都差不多，但面子可以按照要求自适应不同的舞会。

于是所有人都开始换上这种响应式的衣服了。。。

什么是响应式界面

根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

为什么要设计响应式界面

为何按老办法为主流设计特殊版本呢？为什么要费神地尝试统一所有设备呢？

即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知响应式；

台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失响应式；

屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。

鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

响应式界面的四个层次

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

4、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

5、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

响应式界面的基本规则

1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面

网页链接