响应式布局如何设计,谋篇布局的几种方式

内容导航：

什么是响应式布局，响应式布局该如何设计

响应式设计中怎样布局

响应式布局该怎么设计

流布局与响应式网页设计有什么区别

一、什么是响应式布局，响应式布局该如何设计

简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。也就是说，不管你是pc端还是移动端（包括手机和平板等小分辨率的），他都能够根据你的不同的分辨率做出调整，即响应，完整的很好的把效果显示出来。优点是面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题。如果你在pc端调试会发现，他会随着你窗口的分辨率的变化而变化。目前比较常用的框架是bootstrap。。。

二、响应式设计中怎样布局

以流动布局和rem以及CSS3媒体查询来布局，如果单纯适配手机端的话，一般一套设计图就可以了，使用rem，字体大小和图片都可以根据屏幕进行缩放，以下是Javascript代码。
(function (doc, win) { var docEl = lement, resizeEvt = ‘orientationchange’ in
window ? ‘orientationchange’ : ‘resize’, recalc = function () { var
clientWidth = th; if (!clientWidth) return; = 20 * (clientWidth / 1400) +
‘px’; }; if (!stener) return; stener(resizeEvt, recalc, false);
stener(‘DOMContentLoaded’, recalc, false); })(document,
window);三、响应式布局该怎么设计?那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢?有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起css3中的media
query（媒介查询），这可是个好东西，易用、强大、快捷……media
query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。
接下来就一起来深入的了解media query。
当浏览器的分辨率小于1024px的时候，则通过media
query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。
同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据media query预设的层叠样式表来进行相对应的调整。
看看我们的例子： / 当浏览器的可视区域小于980px / @media screen and (max-width: 980px) { #wrap
{width: 90%; margin:0 auto;} #content {width: 60%;paping: 5%;} #sidebar
{width: 30%;} #footer {paping: 8% 5%;margin-bottom: 10px;} } /
当浏览器的可视区域小于650px / @media screen and (max-width: 650px) { #header {height:
auto;} #searchform {position: absolute;top: 5px;right: 0;} #content {width:
auto; float: none; margin: 20px 0;} #sidebar {width: 100%; float: none;
margin: 0;}
}通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。
为了更好的显示效果，我们往往还要格式化一些css属性的初始值：/ 禁用iphone中safari的字号自动调整 /

三、响应式布局该怎么设计

说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media
Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。
接下来就一起来深入的了解Media Query。

当浏览器的分辨率小于1024px的时候，则通过Media
Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media
Query预设的层叠样式表来进行相对应的调整。
看看例子：
/ 当浏览器的可视区域小于980px /
@media screen and (max-width: 980px) {

wrap {width: 90%; margin:0 auto;}

content {width: 60%;padding: 5%;}

sidebar {width: 30%;}

footer {padding: 8% 5%;margin-bottom: 10px;} }

/ 当浏览器的可视区域小于650px /
@media screen and (max-width: 650px) {#header {height: auto;}

searchform {position: absolute;top: 5px;right: 0;}

content {width: auto; float: none; margin: 20px 0;}

sidebar {width: 100%; float: none; margin: 0;}}

通过上面就可以监测浏览器的可视区域变化的是时候页面结构元素也会相对应的变化，当然也可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，往往还要格式化一些CSS属性的初始值：
/ 禁用iPhone中Safari的字号自动调整 /

四、流布局与响应式网页设计有什么区别

答：响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。本回答由网友推荐