响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小， 再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

原理简单点说响应式布局它是通过CSS中Media Query媒介查询@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

响应式布局就是网页会根据上网设备的屏幕大小而自我调整网页的布局听着跟木有解释一样，我举个例子你以全屏访问亚马逊网站，然后在慢慢缩小浏览器会发现有一些东西专业点说是DOM元素不见了，这就是响应式设计的一种。

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容只需要开发一套界面即可适用于所有尺寸及终端3区别 比较直观的不同是自适应。

响应式布局设计Responsivelayoutdesign是指在移动设备上对桌面设备上的网页进行优化布局，使用户在移动设备上更方便地阅读和操作事实上，如果你经常使用不同的设备来浏览互联网页面，就会更容易理解响应式布局设计在移动设备中。

rem布局 它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的根元素字体大小 = 1rem 响应式布局 它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化 响应式布。

通栏等分结构的适合采用弹性布局方式而对于非等分的多栏结构往往需要采用混合布局的实现方式布局响应对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式桌面优先从桌面端开始向下设计。

脚手架全局样式，响应式的12列栅格布局系统记住Bootstrap在默认情况下并不包括响应式布局的功能因此，如果你的设计需要实现响应式布局，那么你需要手动开启这项功能基础CSS包括基础的HTML页面要素，比如表格table。

有了概念，一定要谈谈实现的方法类似于响应式建筑，Web页面也有对应关键因素可弯曲伸缩扩展的墙体结构可扩展的布局运动传感器MediaQuery气候控制系统栅格艺术装置css等等以上给了我写文章的脉络。

这就是响应式设计中实现不同屏幕尺寸下布局调整的关键技术#xF6E0#xFE0F响应式设计工具和资源Bootstrap 是最知名的响应式框架之一Pixso 是一款在线UI设计工具，其支持响应式设计并包含许多实用的功能，如元件自动布局样式等等CSS Grid。

EthanMarcotte最早提出响应式网页设计，EthanMarcotte在AListApart发表的一篇具有开创性意义的文章中，三种已有的开发技巧被他整合起来，命名为响应式网页那么，建立响应式布局应该考虑哪些因素呢一浏览器 首先要考虑到的是。

起因 因为越来越多的智能移动设备 mobile， tablet device 加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了 Internet 的重要组成部分响应式网络设计 RWD AWD的出现，目的是为移动设备提供更好。

因此接下去我们执行以下4个步骤，实现数据的双向绑定深入响应式原理 剖析Vue原理实现双向绑定MVVM 响应式系统的基本原理js JavaScript实现MVVM之我就是想监测一个普通对象的变化。

响应式布局只需要一个页面布局就可以完成屏幕适配，其实现工作量相对较小然而，有必要用一套方案来适应所有的屏幕尺寸所以设计时要考虑很多因素 一般来说，自适应布局适合复杂页面，响应式布局适合页面结构简单的页面 因为移动端和PC。

与其说响应式是一种网站制作的方式不如说其是一种布局方式，响应式的网站布局精致，配合一些CSS动作，通过搭配H5CSS3等页面格式，使网站能够活起来，并能根据设备的区别产生不同的布局变化，可以做到有几种设备就能达到几。

1灵活性不同静态布局毫无灵活性可言，目前已逐渐被淘汰自适应布局静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词流式布局灵活性更高，可适用于其他三种网站布局响应式布局自适应布局的。

响应式布局，称为Responsive Web Design它是将已有的开发技巧弹性网格布局弹性图片媒体和媒体查询整合起来，针对任意设备对网页内容进行“完美”布局的一种显示机制简言之，是一个网站能够兼容多个终端手机Pad。