响应式布局最简单的就是用css3来实现我举一个最简单的例子下面是html代码lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name =quotviewportquot content=quotwidth = devicewidth，initial。

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

footerltdiv id=quotfooterquotfooterltdivlt！end footerltbodylthtml通过上面代码可知它是通过@media媒介查询判断来执行的CSS样式，也就是说如果我要做一个响应式布局网站，同时兼容手机平板PC的话。

如何用CSS做响应式布局呢1在HTML头部添加以下代码，用来显示兼容移动设备的显示效果ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=1，minimumscale=1，maximumscale=1，userscalable=noquot 参数。

这样子就可以根据不同尺寸装置来进行响应式的布局为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值 * 禁用iPhone中Safari的字号自动调整 * webkittextsizeadjust * 设定HTML5元素。

第二步HTML结构 在这个例子里，我有一个包括头部内容侧边栏和页脚的基本页面布局头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素第三步媒介查询Media Queries CSS3 Media Query媒介查询是响应。

4浏览器支持令人遗憾的是，浏览器的支持度还未尽人意，未来在UA上获取更多支持才是Grid发展的根本框架搭建好，才仅仅是响应式的开始但是俗语有云Well begun is half done 响应式从做好的布局开始腾讯ISUX。

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

1响应式网页结构 首先，我们先来看下上面案例展示的html结构，如下图所示可以说这是一个很典型的博客模版结构一个wrapper容器包含了头部内容侧栏底部2Meta标签 其次就需要我们针对移动设备加入这个meta标签。

可切换的固定布局弹性布局混合布局都是目前可被采用的响应式布局方式其中可切换的固定布局的实现成本最低，但拓展性比较差而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式只是对于不同类型的。

flex称为弹性布局，当父元素设置为flex值后子元素会自动成为其成员，再通过设置属性值来实现各种布局效果例通过给父元素设置justifycontent属性实现水平垂直居中效果通过Flex可以简便完整响应式地实现各种页面布局随着浏览。

我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，还要来个不同尺寸设备，我们该怎么淡定下来呢有需求就会有解决方案，说到响应式布局。

例如 二响应式的概念应该是覆盖了自适应，但是包括的东西更多了响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局响应式布局的一些技术点纪录。

也就是一半colsm6 代表在平板上也显示div占当前行的一半colxs12 代表在手机端显示为当前行的百分之百填充3还有其他方式，如JQuery和专门做响应式的JS文件，比如nicebox均能实现自适应效果，实现响应式布局。

响应式布局，通过不同的分辨率显示不同的css样式 就是两套模板，只是根据pc端和手机端的访问模式进行判断，然后选择是用哪个模板如果想pc端和手机端样式相同的话，那就是css样式写一套，不要响应式布局而你说的背景。

可以通过响应式布局来实现内容随着屏幕比例变化而变化，下面列出三个简单的响应式方法例如使用flex布局flex布局的使用 或者把元素的大小改为百分比单位百分比单位的使用 又或者使用vh单位和vw单位，他们是基于显示屏的长宽比来。